JS實現移動端可滑動輪播圖

HTML：

<!--輪播圖-->

<div class="jd_banner">
<ul class="clearFix">
<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
</ul>
<ul>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

CSS:

/*輪播圖*/
.jd_banner{
width: 100%;
overflow: hidden;
position: relative;
}
.jd_banner ul:first-child{
width: 1000%;
transform: translateX(-10%);
-webkit-transform: translateX(-10%);
}
.jd_banner ul:first-child li{
width: 10%;
float: left;
}
.jd_banner ul:first-child li a{
display: block;
width: 100%;
}
.jd_banner ul:first-child li a img{
display: block;
width: 100%;
}
.jd_banner ul:last-child{
position: absolute;
width: 118px;
height: 6px;
left: 50%;
margin-left:-59px;
bottom: 6px;
}
.jd_banner ul:last-child li{
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid #fff;
margin-left:10px;
float: left;
}
.jd_banner ul:last-child li:first-child{
margin-left:0;
}
.jd_banner ul:last-child li.now{
background: #fff;
}

js:

var banner = function () {
/*1. 自動輪播圖且無縫 定時器，過渡*/
/*2. 點要隨着圖片的輪播改變 根據索引切換*/
/*3. 滑動效果 利用touch事件完成*/
/*4. 滑動結束的時候 如果滑動的距離不超過屏幕的1/3 吸附回去 過渡*/
/*5. 滑動結束的時候 如果滑動的距離超過屏幕的1/3 切換（上一張，下一張）根據滑動的方向，過渡*/

/*輪播圖*/
var banner = document.querySelector('.jd_banner');
/*屏幕寬度*/
var width = banner.offsetWidth;
/*圖片容器*/
var imageBox = banner.querySelector('ul:first-child');
/*點容器*/
var pointBox = banner.querySelector('ul:last-child');
/*所有的點*/
var points = pointBox.querySelectorAll('li');

var addTransition = function () {
imageBox.style.transition = 'all 0.2s';
imageBox.style.webkitTransition = 'all 0.2s';
}
var removeTransition = function () {
imageBox.style.transition = 'none';
imageBox.style.webkitTransition = 'none';
}
var setTranslateX = function (translateX) {
imageBox.style.transform = 'translateX(' + translateX + 'px)';
imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
}


/*程序的核心 index */
var index = 1;
var timer = setInterval(function () {
index++;
/*加過渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 1000);
/*需要等最后一張動畫結束去判斷 是否瞬間定位第一張*/
//在每次過渡結束后會觸發該函數
imageBox.addEventListener('transitionend', function () {
/*自動滾動的無縫*/
if (index >= 9) {
index = 1;
/*瞬間定位*/
/*清過渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*滑動的時候也需要無縫*/
else if (index <= 0) {
index = 8;
/*瞬間定位*/
/*清過渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*根據索引設置點*/
/*此時此刻 index 的取值范圍 1-8（0,8--1,9）*/
/*點索引 index - 1 */
setPoint();
});

/*設置點的方法*/
var setPoint = function () {
/*index 1-8*/
/*清除樣式*/
for (var i = 0; i < points.length; i++) {
var obj = points[i];
obj.classList.remove('now');
}
/*給對應的加上樣式*/
points[index - 1].classList.add('now');
}

/*綁定事件*/
var startX = 0;
var distanceX = 0;
var isMove = false;
imageBox.addEventListener('touchstart', function (e) {
/*清除定時器*/
clearInterval(timer);
/*記錄起始位置的X坐標*/
startX = e.touches[0].clientX;
});
imageBox.addEventListener('touchmove', function (e) {
/*記錄滑動過程當中的X坐標*/
var moveX = e.touches[0].clientX;
/*計算位移 有正負方向*/
distanceX = moveX - startX;
/*計算目標元素的位移 不用管正負*/
/*元素將要的定位=當前定位+手指移動的距離*/
var translateX = -index * width + distanceX;
/*滑動--->元素隨着手指的滑動做位置的改變*/
removeTransition();
setTranslateX(translateX);
//是否發生了移動
isMove = true;
});
imageBox.addEventListener('touchend', function (e) {
/*4. 5. 實現*/
/*要使用移動的距離*/
if (isMove) {
if (Math.abs(distanceX) < width / 3) {
/*吸附*/
addTransition();
setTranslateX(-index * width);
} else {
/*切換*/
/*右滑動 上一張*/
if (distanceX > 0) {
index--;
}
/*左滑動 下一張*/
else {
index++;
}
/*根據index去動畫的移動*/
addTransition();
setTranslateX(-index * width);
}
}
/*最好做一次參數的重置*/
startX = 0;
distanceX = 0;
isMove = false;
/*加上定時器*/
clearInterval(timer);
timer = setInterval(function () {
index++;
/*加過渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 1000);
});


}