移动端实现文字轮播_实现移动端轮播图

1、移动端实现滑动切换轮播图，主要由touch(touchstart,touchmove,touchend)事件实现。在touch事件中可以通过 e.touches[0].clientX获取当前触摸点的位置，在touchend事件中没有e.touches[0].clientX值

var banner=function(){

/*

*1、无缝滚动和无缝滑动

*2、点盒子对应改变

*3、可以滑动

*4、当滑动距离不够时 吸附回去

*5、当滑动距离够了时 跳转上/下一张

*/

var banner=document.querySelector('.jd_bannar');

var imgBox=banner.querySelector('ul:first-child');

var pointBox=banner.querySelector('ul:last-child');

var points=pointBox.querySelectorAll('li');

var width=banner.offsetWidth;

var addTransition=function(){

imgBox.style.transition = 'all 0.2s';

imgBox.style.webkitTransition='all 0.2s';

}

var removeTransition=function(){

imgBox.style.transition = 'none';

imgBox.style.webkitTransition='none';

}

var setTranslateX=function(tx){

imgBox.style.transform = 'translateX('+tx+'px)';

imgBox.style.webkitTransform = 'translateX('+tx+'px)';

}

var index=1;

var timer=setInterval(function(){

index++;

addTransition();

setTranslateX((-index*width))

},1000)

//监听 transition结束之后的事件

imgBox.addEventListener('transitionend',function(){

if(index==9){

index=1;

removeTransition();

setTranslateX((-index*width))

}else if(index<=0){

index=8;

removeTransition();

setTranslateX((-index*width))

}

setPoint()

})

var setPoint=function(){

for(var i=0;i

points[i].classList.remove('now')

}

points[index-1].classList.add('now')

}

var stratX=0;

var disX=0;

var ismove=false;

imgBox.addEventListener('touchstart',function(e){

clearInterval(timer)

stratX=e.touches[0].clientX;

})

imgBox.addEventListener('touchmove',function(e){

var moveX=e.touches[0].clientX;

disX=moveX-stratX;

/*计算定位*/

var tx=-index*width+disX;

//清除定位

removeTransition();

setTranslateX(tx);

ismove=true;

})

imgBox.addEventListener('touchend', function(e){

/*disX确定滑动距离，判断是否吸附或者跳转*/

if(ismove && Math.abs(disX)

addTransition();

setTranslateX(-index*width)

}else{

//判断滑动方向

if(disX>0){

index--;

}else{

index++

}

addTransition();

setTranslateX(-index*width)

}

clearInterval(timer)

timer=setInterval(function(){

index++;

addTransition();

setTranslateX((-index*width))

},1000)

//初始化数据

stratX=0;

ismove=false;

disX=0;

})

}