var bannerImg = document.querySelectorAll(".jd_banner ul li");

/*

1.自動滾動(定時器+過渡transition+位移transform:translateX);

2.點隨之滾動起來,改變當(dāng)前的class樣式

3.添加滑動事件(touch)

(1)當(dāng)滑動超過一定距離的時候 滾動到上一張或者下一張 (banner圖片的1/3);

(2)當(dāng)滑動不超過1/3banner寬度時,彈回去,吸附回去

*/

//1.先獲取banner 可見寬度

var bannerBox = document.querySelector(".jd_banner");

//2.獲取可見寬度

var w = bannerBox.offsetWidth;

//3.獲取圖片的ul,再獲取點的ul下所有的li-->點

var ulImg = document.querySelector(".clearfix");

var dot = document.querySelectorAll("ul:nth-child(2) li");

// console.log(dot);

//4.添加過渡方法

var addTransition = function(){

ulImg.style.transition = "all 0.3s linear";//兼容寫法

ulImg.style.webkitTransition = "all 0.3s linear";//兼容寫法

// transition:all 1s linear(勻速) 1s;

}

//5.添加過渡方法

var addTranslateX = function(translateX){

ulImg.style.transform = "translateX("+translateX+"px)";

ulImg.style.webkitTransform = "translateX("+translateX+"px)";

}

//6.添加X軸方向的位移方法

//刪除過度的方法

var removeTransition = function(){

// ulImg.style.webkitTransition="none";

ulImg.style.transition="none";

}

//7.定時器 自動滾動起來

var index = 1;//記錄滾動的次數(shù)

var timer = setInterval(function(){

//讓index++;盒子滾動

index++;

//調(diào)用過渡

addTransition();

//調(diào)用位移

var translateX

translateX = -(index*w);

addTranslateX(translateX);

},2000);

//8綁定一個過渡結(jié)束事件

itcast.transitionEnd(ulImg,function(){

if(index>=9){

index = 1;

removeTransition();

addTranslateX(-index*w);

}else if(index<=0){

index = 8;

removeTransition();

addTranslateX(-index*w);

}

setPoint();

});

//9.點隨之移動

function setPoint(){

for(var i=0;i

dot[i].className="";

}

dot[index-1].className="now";

}

//10.圖片滑動事件touch

var startX = 0,//當(dāng)前你觸摸的X軸坐標(biāo)

moveX=0,//移動的時候的 X軸的實時坐標(biāo)

distanceX = 0, //moveX-startX

isMove = false;//表示是否移動

//touchstart

ulImg.addEventListener("touchstart",function(e){

//獲取startX的值

//清除定時器

clearInterval(timer);

startX = e.touches[0].clientX;

setPoint();

});

ulImg.addEventListener("touchmove",function(e){

isMove=true

//獲取moveX的值

moveX = e.touches[0].clientX;

//獲取distanceX的值

distanceX = moveX-startX;

//正值 右移(上一張)

//負值 左移(下一張)

//真正位移的距離 -index*w+distanceX

//刪除過渡

removeTransition();

//調(diào)用位移方法

addTranslateX(-index*w+distanceX);

});

ulImg.addEventListener("touchend",function(e){

//判斷distanceX>w/3

//取絕對值Math.abs();

if(isMove&&(Math.abs(distanceX)>w/3)){//大于w/3時,index已經(jīng)改變,所以在綁定一個過渡結(jié)束事件里面添加了一個判斷

if(distanceX>0){

//向右滑

index--;

addTransition();

addTranslateX(-index*w);

}else{

//向左滑

index++;

addTransition();

addTranslateX(-index*w);

}

}else{

//當(dāng)滑動距離小于w/3的時候,自動定位回去,index值不變

addTransition();

addTranslateX(-index*w);

}

//重置我們的所有變量

startX = 0;

moveX=0;

distanceX = 0;

isMove = false;

timer = setInterval(function(){

index++;

addTransition();

//調(diào)用位移

var translateX

translateX = -(index*w);

addTranslateX(translateX);

setPoint();

},2000);

});

總結(jié)

以上是生活随笔為你收集整理的android京东首页轮播代码,web移动端-轮播的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。