轮播图制作

1.js实现轮播图

<div class="banner">
            <ul class="jd_bannerImg  clearfix">

                <li>
                    <a href="javascript:;">
                        <img src="uploads/l1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l7.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="uploads/l8.jpg" alt="">
                    </a>
                </li>

            </ul>
            <ul class="jd_bannerIndicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

function bannerEffect() {
    /*
     *修改页面结构
     *  1.在开始添加原始图片的最后一张图片
     *  2.在最后添加原始图片的第一张图片
     */

    //获取页面元素
    var banner = document.querySelector('.banner');
    //获取图片容器
    var bannerImg = banner.querySelector('ul:first-of-type');
    //获取第一个图片
    var first = bannerImg.querySelector('li:first-of-type');
    //获取最后一张图片
    var last = bannerImg.querySelector('li:last-of-type');
    //在开始结尾插入图片
    /*cloneNode   复制DOM元素*/
    bannerImg.appendChild(first.cloneNode(true));
    bannerImg.insertBefore(last.cloneNode(true),bannerImg.firstChild);

    /*
     *设置页面样式
     *  1.获取li元素
     *  2.获取banner宽度
     *  3.设置盒子宽度
     *  4.设置li宽度
     *  5.设置偏移量
     */
    var lis = bannerImg.querySelectorAll('li');
    var count = lis.length;
    var bannerWidth = banner.offsetWidth;
    bannerImg.style.width = count*bannerWidth+'px';
    for(var i = 0;i < lis.length;i++){
        lis[i].style.width=bannerWidth+'px';
    }
    /*设置索引值*/
    var index= 1;
    bannerImg.style.left=-bannerWidth+'px';

    /*页面宽度改变，重新获取*/
    window.onresize=function () {
        bannerWidth = banner.offsetWidth;
        bannerImg.style.width = count*bannerWidth+'px';
        for(var i = 0;i < lis.length;i++){
            lis[i].style.width=bannerWidth+'px';
        }
        bannerImg.style.left=-index*bannerWidth+'px';
    }

    /*自动轮播
    * 1.添加定时器
    * 2.设置索引
    * 3.添加偏移量
    * */
    var timeID;
    var setTime = function () {
        timeID=setInterval(function () {
            index++;
            /*添加过渡效果*/
            bannerImg.style.transition='left 0.5s ease-in-out';
            bannerImg.style.left=(-index*bannerWidth)+'px';
            /*延迟操作*/
            setTimeout(function () {
                /*判断是否处于末尾*/
                if(index==count-1){
                    index=1;
                    /*清除过渡效果
                    * 由于之前元素添加过的效果会一直存在，所以需要清除
                    * */
                    bannerImg.style.transition='none';
                    bannerImg.style.left=(-index*bannerWidth)+'px';
                }
            },500);

        },2000)
    }
    setTime();

    /*点标记*/
    var setPoint = function (index) {
        var pointLable = banner.querySelector('ul:last-of-type').querySelectorAll('li');
        for(var i=0;i<pointLable.length;i++){
            pointLable[i].classList.remove('active');
        }
        pointLable[index-1].classList.add('active')
    }

    /*手动轮播*/
    /*判断过渡是否完成*/
    var isEnd=true;
    var startX,moveX,endX;
    bannerImg.addEventListener('touchstart',function (e) {
        /*清除时钟*/
        clearInterval(timeID);
        startX = e.targetTouches[0].clientX;
    });

    bannerImg.addEventListener('touchmove',function (e) {
        if(isEnd==true){
            moveX = e.targetTouches[0].clientX;
            endX = moveX - startX;
            bannerImg.style.transition="none";
            bannerImg.style.left =(-index*bannerWidth)+ endX+'px';
        }
    });
    bannerImg.addEventListener('touchend',function (e) {
        /*过渡正在执行*/
        isEnd=false;

        if(Math.abs(endX) > 100){
            if(endX > 0){
                index--;
            }else {
                index++;
            }
            bannerImg.style.transition='left 0.5s ease-in-out';
            bannerImg.style.left=(-index*bannerWidth)+'px';
        }else if(Math.abs(endX) > 0){
            bannerImg.style.transition='left 0.5s ease-in-out';
            bannerImg.style.left=(-index*bannerWidth)+'px';
        }
        /*将move产生的数据重置*/
        startX=0;
        moveX=0;
        endX=0;

    });
    /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/
    bannerImg.addEventListener('webkitTransitionEnd',function () {
        if(index == count-1){
            index=1;
            /*清除过渡效果*/
            bannerImg.style.transition="none";
            bannerImg.style.left=(-index*bannerWidth)+'px';
        }else if(index==0){
            index = count-2;
            /*清除过渡效果*/
            bannerImg.style.transition="none";
            bannerImg.style.left=(-index*bannerWidth)+'px';
        }
        setPoint(index);
        setTimeout(function () {
            isEnd=true;
            /*清除时钟*/
            clearInterval(timeID);
            //重新开启定时器
            setTime();

        },500);

    });

2.bootstrap实现轮播图（先导入bootstrap文件）

<!--轮播图-->
<div class="wjs_banner">
    <div id="carousel-example-generic" class="wjs_banner carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <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>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active " data-large-img="./images/slide_01_2000x410.jpg" data-small-img="./images/slide_01_640x340.jpg">

            </div>
            <div class="item " data-large-img="./images/slide_02_2000x410.jpg" data-small-img="./images/slide_02_640x340.jpg">

            </div>
            <div class="item " data-large-img="./images/slide_03_2000x410.jpg" data-small-img="./images/slide_03_640x340.jpg">

            </div>
            <div class="item " data-large-img="./images/slide_04_2000x410.jpg" data-small-img="./images/slide_04_640x340.jpg">

            </div>
        </div>

        <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>

$(function () {

    $('[data-toggle="tooltip"]').tooltip();

    var items = $('.carousel-inner .item');
    $(window).on('resize',function () {
        var width = $(window).width();
        if(width>=768){
            $(items).each(function (index,value) {
                var item = $(this);
                var imgSrc = item.data('largeImg');
                item.html($('<a href="javascript:;" class="pcImg " ></a>').css("backgroundImage","url('"+imgSrc+"')"));
            })
        }else {
            $(items).each(function (index,value) {
                var item = $(this);
                var imgSrc = item.data('smallImg');
                item.html('<a href="javascript:;" class="mobileImg"><img src="'+imgSrc+'" alt="..."></a>');

            })
        }
    }).trigger('resize');
    /*添加移动端的滑动操作*/
    var startX,endX;
    var carousel_inner=$(".carousel-inner")[0];

    /*获取当前轮播图*/
    var carousel=$(".carousel");

    carousel_inner.addEventListener("touchstart",function(e){
        startX= e.targetTouches[0].clientX;
    });
    carousel_inner.addEventListener("touchend",function(e){
        endX= e.changedTouches[0].clientX;
        if(endX-startX > 0){
            /*上一张*/
            carousel.carousel('prev');
        }
        else if(endX-startX < 0){
            /*下一张*/
            carousel.carousel('next');
        }
    });

    var ul = $('.wjs_product .nav-tabs');
    var lis = ul.find('li');
    var totalWidth = 0;
    lis.each(function (index,value) {
        totalWidth = totalWidth + $(value).outerWidth(true);
    });
    ul.width(totalWidth);
    var myScroll = new IScroll('.tabs',{
        scrollX: true,
        scrollY: false,
    });


});

3.swipe实现轮播图（先导入文件）

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

window.mySwipe = Swipe(document.getElementById('slider'));

4.swiper实现看轮播图（先导入文件）

详情：https://www.swiper.com.cn/