1.js实现轮播图

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
     
       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文件）

     
     
    
      
        
               
       
            
        
            
        
            
        
            
        
        
       
        
       
            
        
            
        
            
        
            
        
            
        
            
        
            
        
            
        
        
       
        
                               Previous                
                               Next            
      
     

$(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($('').css("backgroundImage","url('"+imgSrc+"')"));            })        }else {            $(items).each(function (index,value) {                var item = $(this);                var imgSrc = item.data('smallImg');                item.html('');            })        }    }).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实现轮播图（先导入文件）

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