<ol class="carousel-indicators">
            <!-- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li> -->
        </ol>

        <!-- 主体的图片 -->

        <div class="carousel-inner" role="listbox">
            <!-- <div class="item active">
                <img style="width: 600px;height: 400px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-81dcb196b25707d37994db5de61f58f4_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647502094&t=74b368757045c39afc98f5ea6eb03aea" alt="...">
                <div class="carousel-caption">我的小拼</div>
            </div>
            <div class="item">
                <img style="width: 600px;height: 400px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-149c726ff219b8c678783b0ca5cae6e6_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647502094&t=26d6855f0aba5a2c7f09ba645982922f" alt="...">
                <div class="carousel-caption">我的小多</div>
            </div>
            <div class="item">
                <img style="width: 600px;height: 400px;" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpica.zhimg.com%2Fv2-4bb7fe71ef26c1863a3005eabb2a8ba6_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpica.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647502094&t=3a37704bcba1c8cd8815a765fdf5bde0" alt="...">
                <div class="carousel-caption">我的小多多</div>
            </div> -->
        </div>

        <!-- Controls 向左 向右控制图片-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<script src="./css/jquery-1.12.4.js"></script>
<script src="./css/bootstrap.min.js"></script>
<script>
    $.ajax({
        url: "https://api.apiopen.top/getWangYiNews",
        method: "post",
        data: {
            page: 1, count: 5
        },
        success: function (res) {
            let str = '';
            let str2 = '';
            let { result } = res;
            result.forEach((r, i) => {
                if (i == 0) {
                    str += `
            <div class="item active">
                <img style="width: 600px;height: 400px;" src="${r.image}" alt="...">
                <div class="carousel-caption">${r.tittle}</div>
            </div>
                      `
                    str2 += `
                      <li data-target="#carousel-example-generic" data-slide-to="${i}" class="active"></li>
                      `
                }
                if (i > 0) {
                    str += `
            <div class="item">
                <img style="width: 600px;height: 400px;" src="${r.image}" alt="...">
                <div class="carousel-caption">${r.tittle}</div>
            </div>
                      `
                    str2 += `
                      <li data-target="#carousel-example-generic" data-slide-to="${i}" class="active"></li>
                      `
                }
            })
            $('.carousel-inner').html(str)
            $('.carousel-indicators').html(str2)
        }
    })










</script>