Question

我必须使用jquery ajax构建一个动态轮播，我的老板建议我使用.append（）方法。这是我的carousel html代码：

<div id="myCarousel">

            </div>
            <div class="container-fluid" id="slider">
            <div id="pb_2">
            <div id="carousel_2" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">

                <!--img slider del progetto-->
                        <div class="item">
                                <img src="images/img01.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item active">

                                    <img src="images/img24.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">

                                <img src="images/img23.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">

                                <img src="images/img17.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">

                                <img src="images/img15.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                <!--fine img slider del progetto-->


                </div>

                <!-- Controls -->
                    <a class="left carousel-control" href="#carousel_2" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Precedente</span>
                    </a>
                    <a class="right carousel-control" href="#carousel_2" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Prossimo</span>
                    </a>
                </div>

             </div>
         </div>

和我的jquery ajax：

$(document).ready(function () {
    $.get("myImagesURL")
    .done(function (response) {
      $(response.DataObject).each(function (i, item) {
          $('#myCarousel').append($('<div class="item"><img src="' + item.AbsolutePathImage + '" alt="image description" width="100%" height="349" /><div class="carousel-caption"></div></div>'));
      });
    })
  .fail(function () {
      alert("error");
  })
  .always(function () {
      alert("complete");
  });

});

所有图片都已加载但旋转木马不是......我怎么能用Jquery实现这个轮播？我是编程新手......

提前致谢！

Answer 1

这对我来说很有用。但你可以尝试这个setTimeOut。

        $(document).ready(function () {

     setTimeout(function(){
        $.get("myImagesURL")
        .done(function (response) {
          $(response.DataObject).each(function (i, item) {
              $('#myCarousel').append($('<div class="item"><img src="' + item.AbsolutePathImage + '" alt="image description" width="100%" height="250" /><div class="carousel-caption"></div></div>'));
          });
        });

    }, 3000);


    });

动态轮播滑块jquery .append

1 个答案: