android京东首页轮播代码,web移动端-轮播

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

/*

1.自动滚动(定时器+过渡transition+位移transform:translateX);

2.点随之滚动起来,改变当前的class样式

3.添加滑动事件(touch)

(1)当滑动超过一定距离的时候 滚动到上一张或者下一张 (banner图片的1/3);

(2)当滑动不超过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;//记录滚动的次数

var timer = setInterval(function(){

//让index++;盒子滚动

index++;

//调用过渡

addTransition();

//调用位移

var translateX

translateX = -(index*w);

addTranslateX(translateX);

},2000);

//8绑定一个过渡结束事件

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,//当前你触摸的X轴坐标

moveX=0,//移动的时候的 X轴的实时坐标

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

//调用位移方法

addTranslateX(-index*w+distanceX);

});

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

//判断distanceX>w/3

//取绝对值Math.abs();

if(isMove&&(Math.abs(distanceX)>w/3)){//大于w/3时,index已经改变,所以在绑定一个过渡结束事件里面添加了一个判断

if(distanceX>0){

//向右滑

index--;

addTransition();

addTranslateX(-index*w);

}else{

//向左滑

index++;

addTransition();

addTranslateX(-index*w);

}

}else{

//当滑动距离小于w/3的时候,自动定位回去,index值不变

addTransition();

addTranslateX(-index*w);

}

//重置我们的所有变量

startX = 0;

moveX=0;

distanceX = 0;

isMove = false;

timer = setInterval(function(){

index++;

addTransition();

//调用位移

var translateX

translateX = -(index*w);

addTranslateX(translateX);

setPoint();

},2000);

});