html5动态生成轮播图

效果如下，不知怎么在电脑上截GIF，就随便截了两张。

代码如下。采用的是

swiper-3.3.1.jquery.min.js

框架。本文就讲讲如何使用这个js文件。

<div id="wrapper" style="margin-top: 91px">
    <div id="scroller">

        <!--轮播-->
        <div class="slideBannerSwrap">
            <!--轮播图-->
            <div style="position: relative;width: 100%;" id="slideBox">
                <div class="swiper-container">
                    <div class="swiper-wrapper" style="height: 180px">
                        <!--动态生成轮播DOM-->
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>

然后在js代码里用ajax调用接口动态生成轮播图 上面这些div组件就不一一解释了。

function bannerShowMss(data){
    var swiperWrapper = document.getElementsByClassName('swiper-wrapper')[0];
    var url='/apishouye-slider-mss_'+data+'.html';
    $.ajax({
        url:url,
        type:"get",
        dataType:"json",
        success:function(dataObject){
            if(dataObject.state.state===1){

                var showImages = dataObject.data;
                for(var i=0;i<showImages.length;i++){
                    var swiperSlide = document.createElement('div');
                    swiperSlide.className = 'swiper-slide';
                    var slideA = document.createElement('a');
                    slideA.href=imgHref(showImages[i].link_num,showImages[i].link_type);

                    slideA.className = 'slide-a';
                    var bannerImg = document.createElement('img');
                    bannerImg.className = 'bannerImg';
                    swiperSlide.appendChild(slideA);
                    slideA.appendChild(bannerImg);
                    swiperWrapper.appendChild(swiperSlide);
                }
                var classA = document.getElementsByClassName('slide-a');
                var imgArray = document.getElementsByClassName('bannerImg');
                for(var i=0;i<imgArray.length;i++){
                    imgArray[i].src = showImages[i].images;
                }
                var imgFirst = new Image();
                imgFirst.src = showImages[0].images;
                imgFirst.οnlοad=function(){
                    var swiper = new Swiper('.swiper-container',{
                        autoplay:3000,
                        speed:500,
                        pagination : '.swiper-pagination',
                        loop:true,
                        autoplayDisableOnInteraction : false
                    });
                }
            }else{
                $(".slideBannerSwrap").hide();
            }
        }
    });
}

首先找到div组件，在调用接口，拿到json数组。然后根据数组的长度创建div、a、img标签。将json数据里面的image链接设置到img上。最后当第一张图片加载完成时调用轮播方法Swiper()。