html5动态生成轮播图

来源：互联网发布：茂木忍男装知乎编辑：程序博客网时间：2024/05/21 10:02

效果如下，不知怎么在电脑上截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.onload=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()。

0 0