話不多說直接上程式碼。

html 結構

<div class="jd_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>
 

css樣式

 <style>
        .jd_banner{
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        /*.jd_bannerImg{
            width:800%;
        }*/
        .jd_bannerImg{
            width:800%;
            /*position: absolute;  如果使用absolute定位，會造成父容器無法獲取由子元素的撐開的高度*/
            position: relative;
            /*新增預設偏移*/
            /*transform: translateX(-10%);*/
            /*使用定位：使用百分比的時候是參照父容器的寬度*/
            /* left: -100%;*/
        }
        /*.jd_bannerImg > li{
            width:12.5%;
            float: left;
        }*/
        .jd_bannerImg > li{
            width:12.5%;
            float: left;
        }
        .jd_bannerImg > li img{
            /*1.設定為塊元素
            2.可以將文字的字型大小設定為0
            3.vertical-align:bottom*/
            display: block;
            width: 100%;
        }
        .jd_bannerIndicator{
            width: 128px;
            height: 10px;
            position: absolute;
            left: 50%;
            bottom: 5px;
            transform: translateX(-50%);
        }
        .jd_bannerIndicator > li{
            width: 6px;
            height: 6px;
            border-radius: 3px;
            border: 1px solid #fff;
            float: left;
            margin-left:10px;
        }
        .jd_bannerIndicator > li:first-of-type{
            margin-left:0;
        }
        .jd_bannerIndicator > li.active{
            background-color: #fff;
        }

    </style>
 

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<lis.length;i++){
            lis[i].style.width=bannerWidth+"px";
        }
        /*定義圖片索引:圖片已經有一個寬度的預設偏移*/
        var index=1;
        /*設定預設的偏移*/
        imgBox.style.left=-bannerWidth+"px";
 

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<indicators.length;i++){
                indicators[i].classList.remove("active");
            }
            /*為當前li元素新增active樣式*/
            indicators[index-1].classList.add("active");
        }

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);
        });