移动端轮播图

标签：mat   get   tran   translate   --   rtb   ora   append   transform   

 jdBannerJ();

unction jdBannerJ(){
var jdBannerImg = document.querySelector(‘.jd_bannerImg‘);
var jdBannerTagLis = document.querySelector(‘.jd_bannerTag‘).children;
var fChild = jdBannerImg.querySelector("li:first-of-type").cloneNode(true);
var lChild = jdBannerImg.querySelector("li:last-of-type").cloneNode(true);
var index = 1;
jdBannerImg.appendChild(fChild);
jdBannerImg.insertBefore(lChild, jdBannerImg.querySelector("li:first-of-type"));
var lis = jdBannerImg.querySelectorAll("li");
var count = lis.length;
var totalW = count * 100;
jdBannerImg.style.width = totalW + "%";
var offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
for(var i = 0; i < count; i++){
lis[i].style.width = offLeft;
}
var jdTaglis = jdBannerTagLis.length;
// window.onresize = function(){
// var totalW = count * 100;
// var offLeft = (100 / count) + "%";
// jdBannerImg.style.width = totalW + "%";
// jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
// for(var i = 0; i < count; i++){
// lis[i].style.width = offLeft;
// }
// }
// 自动轮播
var timeId;
bannerAction();
function bannerAction(){
clearInterval(timeId);
timeId = setInterval(function(){
index++;
jdBannerImg.style.transition = "all 0.5s ease-in-out";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
if(index == count-1){
setTimeout(function(){
index = 1;
jdBannerImg.style.transition = "none";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
}, 500);
}
}, 1500);
}
var startX,moveX,distanceX,indexX;
var isEnd = true;
jdBannerImg.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].clientX;
indexX = index*(fChild.offsetWidth);
jdBannerImg.style.transition = "none";
clearInterval(timeId);
});
jdBannerImg.addEventListener("touchmove",function(e){
if(isEnd){
moveX = e.targetTouches[0].clientX;
distanceX = moveX - startX;
jdBannerImg.style.transform = "translateX("+ (distanceX - indexX) +"px)";
}
});
jdBannerImg.addEventListener("touchend",function(e){
isEnd = false;
if(Math.abs(distanceX) > 100){
if(distanceX < 0){
index ++;
} else {
index --;
}
} else if(Math.abs(distanceX) == 0){
index = index;
}
jdBannerImg.style.transition = "all 0.5s ease-in-out";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
bannerAction();
starx = 0;
moveX = 0;
distanceX = 0;
console.log(index);
});
jdBannerImg.addEventListener("webkitTransitionEnd", function(){
if(index == count-1){
index = 1;
jdBannerImg.style.transition = "none";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
} else if(index == 0){
index = count-2;
// jdBannerTagLis[index - 1].className = "current";
jdBannerImg.style.transition = "none";
offLeft = (100 / count)*index + "%";
jdBannerImg.style.transform = "translateX(-"+ offLeft +")";
}
// isEnd = true;
// clearInterval(timeId);
// bannerAction();
setTimeout(function(){
isEnd = true;
clearInterval(timeId);
bannerAction();
}, 100);
for(var i = 0; i < jdTaglis; i++){
jdBannerTagLis[i].className = "none";
}
jdBannerTagLis[index - 1].className = "current";
});
}

移动端轮播图

标签：mat   get   tran   translate   --   rtb   ora   append   transform   

原文地址：https://www.cnblogs.com/pxxdbk/p/12732004.html