原生JS实现移动端轮播图。

话不多说直接上代码。

html 结构

css样式

js

1.设置一下轮播的页面结构，以及获取一下需要用到的元素。

        /*获取轮播图结构*/
        var banner=document.querySelector(".jd_banner");
        /*获取图片容器*/
        var imgBox=banner.querySelector("ul:first-of-type");
        /*获取原始的第一张图片*/
        var first=imgBox.querySelector("li:first-of-type");
        /*获取原始的最后一张图片*/
        var last=imgBox.querySelector("li:last-of-type");
        /*在首尾插入两张图片   cloneNode:复制一个dom元素*/
        imgBox.appendChild(first.cloneNode(true));
        /*insertBefore(需要插入的dom元素，位置)*/
        imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
        /*获取所有图片li元素*/
        var lis=imgBox.querySelectorAll("li");
        /*获取li元素的数量*/
        var count=lis.length;
        /*.获取banner的宽度*/
        var bannerWidth=banner.offsetWidth;
        /*设置图片盒子的宽度*/
        imgBox.style.width=count*bannerWidth+"px";
        /*设置每一个li(图片)元素的宽度*/
        for(var i=0;i

2.实现自动轮播

var timerId;
        var startTime=function(){
            timerId=setInterval(function(){
                index++;
                imgBox.style.transition="left 0.5s ease-in-out";
                /*5.3 设置偏移*/
                imgBox.style.left=(-index*bannerWidth)+"px";
                /*5.4 判断是否到最后一张，如果是则回到索引1的位置*/
                setTimeout(function(){
                    if(index==count-1){
                        index=1;
                        imgBox.style.transition="none";
                        /*偏移到指定的位置*/
                        imgBox.style.left=(-index*bannerWidth)+"px";
                        indicators[count - 3].classList.remove('active');
                        indicators[0].classList.add('active');
                    }
                },500);
            },1000);
        }
        startTime();

3.实现点标记

 var indicators=banner.querySelector("ul:last-of-type").querySelectorAll("li");
        var setIndicator=function(index){
            /*先清除其它li元素的active样式*/
            for(var i=0;i

4.实现手动轮播

 var startX,moveX,distanceX;
        /*标记当前过渡效果是否已经执行完毕*/
        var isEnd=true;
        /*为图片添加触摸事件--触摸开始*/
        imgBox.addEventListener("touchstart",function(e){
            clearInterval(timerId);
            /*获取当前手指的起始位置*/
            startX= e.targetTouches[0].clientX;
        });
        /*为图片添加触摸事件--滑动过程*/
        imgBox.addEventListener("touchmove",function(e){
            if(isEnd==true){
                /*记录手指在滑动过程中的位置*/
                moveX= e.targetTouches[0].clientX;
                distanceX=moveX-startX;
                /*为了保证效果正常，将之前可能添加的过渡样式清除*/
                imgBox.style.transition="none";
                 /* 本次的滑动操作应该基于之前轮播图已经偏移的距离*/
                imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
            }
        });
        /*添加触摸结束事件*/
        imgBox.addEventListener("touchend",function(e){
            /*松开手指，标记当前过渡效果正在执行*/
            isEnd=false;
            /*获取当前滑动的距离，判断距离是否超出指定的范围 100px*/
            if(Math.abs(distanceX) > 100){
                /*判断滑动的方向*/
                if(distanceX > 0){//上一张
                    index--;
                }
                else{ //下一张
                    index++;
                }
                /*翻页*/
                imgBox.style.transition="left 0.5s ease-in-out";
                imgBox.style.left=-index*bannerWidth+"px";
            }
            else if(Math.abs(distanceX) > 0){ //得保证用户确实进行过滑动操作
                /*回弹*/
                imgBox.style.transition="left 0.5s ease-in-out";
                imgBox.style.left=-index*bannerWidth+"px";
            }
            /*将上一次move所产生的数据重置为0*/
            startX=0;
            moveX=0;
            distanceX=0;
        });
        /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/
        imgBox.addEventListener("webkitTransitionEnd",function(){
            console.log("webkitTransitionEnd");
            /*如果到了最后一张(count-1)，回到索引1*/
            /*如果到了第一张(0)，回到索引count-2*/
            if(index==count-1){
                index=1;
                imgBox.style.transition="none";
                imgBox.style.left=-index*bannerWidth+"px";
            }
            else if(index==0){
                index=count-2;
                imgBox.style.transition="none";
                imgBox.style.left=-index*bannerWidth+"px";
            }
            /*设置标记*/
            setIndicator(index);
            setTimeout(function(){
                isEnd=true;
                clearInterval(timerId);
                startTime();
            },100);
        });