如今，移動端web頁面在市場上也是佔有相當大的比例，而移動端的輪播圖效果也是很常見的，今天我就來記錄下關於實現一組適用於移動端的可用手指進行撥動切換輪播圖的效果。
這個效果的主要技術點依託於觸屏裝置特有的touch事件；好了，接下來就進入主題吧。

首先是html佈局：

1. 這裡強調的是記得給html加上viewport這個適口屬性。
2. 由於在撥動第一張圖片以及最後一張圖片的時候需要切換到最後一張以及第一張，要想達到理想效果，需要給第一張圖片前面加上最後一張圖片，而在最後一張圖片後加上第一張圖片。
3. f_l代表的是左浮動

**html程式碼如下：**

                <ul
 
 class='banner_imgs clearfix'>
                    <li class='f_l'>
                        <a href="#"><img src="image/l8.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l1.jpg"
 
 alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l2.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#">
 
<img src="image/l3.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l4.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l5.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l6.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l7.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l8.jpg" alt="" /></a>
                    </li>
                    <li class='f_l'>
                        <a href="#"><img src="image/l1.jpg" alt="" /></a>
                    </li>
                </ul>
                <!-- 輪播圖的 索引 -->
                <ul class="banner_index clearfix">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

接下來是css樣式：

1. 注意，此處並沒有加上常規的reset樣式程式碼

.jd_banner .banner_imgs {
  /* 10倍螢幕寬度 */
  width: 1000%;
}
.jd_banner .banner_imgs li {
  /* 一倍的螢幕寬度 */
  width: 10%;
}
.jd_banner .banner_imgs li a {
  display: block;
  width: 100%;
}
.jd_banner .banner_imgs li a img {
  display: block;
  width: 100%;
}
.jd_banner .banner_index {
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -64px;
}
.jd_banner .banner_index li {
  float: left;
  width: 6px;
  height: 6px;
  border: 1px solid white;
  border-radius: 50%;
  margin: 0 5px;
}
.jd_banner .banner_index li.current {
  background-color: #fff;
}

最後是最最重要的js程式碼啦

1. transitionend 過渡結束後觸發的效果，在這兒主要是保證圖片切換到最後一張我們手動增加的圖片完成的瞬間，切換回到真正的第一張圖片處；
2. touch事件的三要素： touchstart--手指按上時，touchmove－－手指移動時，touchend－－手指鬆開螢幕時；
3. event.touches[0].clientX獲取按下一個手指時的位置，可以打印出event檢視其包含有哪些屬性方法；

window.onload = function() {
    slide();
}

function slide() {
    var bannerImgs = document.querySelector(".banner_imgs");
    var Indexs = document.querySelectorAll(".banner_index li");
    var imgLis = document.querySelectorAll(".banner_imgs li");

    //螢幕寬度
    var screenWidth = document.body.offsetWidth;
    var index = 1;

    //預設顯示的應該是第二張圖片
    bannerImgs.style.transform = "translateX(" + screenWidth * index * -1 + "px)";

    //新增過渡效果
    function setTransition() {
        bannerImgs.style.webkitTransition = "all .2s";
        bannerImgs.style.transition = "all .2s";
    }

    //清除過渡效果
    function clearTransition() {
        bannerImgs.style.webkitTransition = "none";
        bannerImgs.style.transition = "none";
    }

    //設定移動距離
    function setTranslateX(distance) {
        bannerImgs.style.webkitTransform = "translateX(" + distance + "px)";
        bannerImgs.style.transform = "translateX(" + distance + "px)";
    }

    //控制小圓點
    function setPoint() {
        for (var i = 0; i < Indexs.length; i++) {
            Indexs[i].className = "";
        }
        Indexs[index - 1].className = "current";
    }

    //設定定時器
    var timer = setInterval(function() {
        index++;
        setTransition();
        setTranslateX(screenWidth * index * -1);
    }, 1000);

    //新增過渡動畫結束事件
    bannerImgs.addEventListener("transitionend", function() {
        if (index > 8) {
            index = 1;
        } else if (index < 1) {
            index = 8;
        }
        clearTransition();
        setTranslateX(screenWidth * index * -1);
        setPoint();
    })


    //新增touch事件
    var startX = 0;
    var moveX = 0;
    var isMove = false;

    bannerImgs.addEventListener("touchstart", function(event) {
        isMove = false;
        clearInterval(timer);
        startX = event.touches[0].clientX;
    })

    bannerImgs.addEventListener("touchmove", function(event) {
        isMove = true;
        moveX = event.touches[0].clientX - startX;
        setTranslateX(moveX + index * screenWidth * -1);
    })

    bannerImgs.addEventListener("touchend", function(event) {
        if(isMove && Math.abs(moveX) > screenWidth/3){
            if (moveX < 0) {
                index++;
            } else if (moveX > 0) {
                index--;
            }
        }
        setTransition();
        setTranslateX(index * screenWidth * -1);
        timer = setInterval(function() {
            index++;
            setTransition();
            setTranslateX(screenWidth * index * -1);
        }, 1000);
    })
}