html手機移動端輪播器,JS仿京東移動端手指撥動切換輪播圖效果

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

})

}