JS仿京东移动端手指拨动切换轮播图效果
如今，移动端web页面在市场上也是占有相当大的比例，而移动端的轮播图效果也是很常见的，今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果。
这个效果的主要技术点依托于触屏设备特有的touch事件；好了，接下来就进入主题吧。
首先是html布局：
1.这里强调的是记得给html加上viewport这个适口属性。
2.由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张，要想达到理想效果，需要给第一张图片前面加上最后一张图片，而在最后一张图片后加上第一张图片。
3.f_l代表的是左浮动
**html代码如下：**
<ulclass='banner_imgsclearfix'> <liclass='f_l'> <ahref="#"><imgsrc="image/l8.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l1.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l2.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l3.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l4.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l5.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l6.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l7.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l8.jpg"alt=""/></a> </li> <liclass='f_l'> <ahref="#"><imgsrc="image/l1.jpg"alt=""/></a> </li> </ul> <!--轮播图的索引--> <ulclass="banner_indexclearfix"> <liclass="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
接下来是css样式：
注意，此处并没有加上常规的reset样式代码
.jd_banner.banner_imgs{
/*10倍屏幕宽度*/
width:1000%;
}
.jd_banner.banner_imgsli{
/*一倍的屏幕宽度*/
width:10%;
}
.jd_banner.banner_imgslia{
display:block;
width:100%;
}
.jd_banner.banner_imgsliaimg{
display:block;
width:100%;
}
.jd_banner.banner_index{
position:absolute;
bottom:15px;
left:50%;
margin-left:-64px;
}
.jd_banner.banner_indexli{
float:left;
width:6px;
height:6px;
border:1pxsolidwhite;
border-radius:50%;
margin:05px;
}
.jd_banner.banner_indexli.current{
background-color:#fff;
}
最后是最最重要的js代码啦
1.transitionend过渡结束后触发的效果，在这儿主要是保证图片切换到最后一张我们手动增加的图片完成的瞬间，切换回到真正的第一张图片处；
2.touch事件的三要素：touchstart--手指按上时，touchmove－－手指移动时，touchend－－手指松开屏幕时；
3.event.touches[0].clientX获取按下一个手指时的位置，可以打印出event查看其包含有哪些属性方法；
window.onload=function(){
slide();
}
functionslide(){
varbannerImgs=document.querySelector(".banner_imgs");
varIndexs=document.querySelectorAll(".banner_indexli");
varimgLis=document.querySelectorAll(".banner_imgsli");
//屏幕宽度
varscreenWidth=document.body.offsetWidth;
varindex=1;
//默认显示的应该是第二张图片
bannerImgs.style.transform="translateX("+screenWidth*index*-1+"px)";
//添加过渡效果
functionsetTransition(){
bannerImgs.style.webkitTransition="all.2s";
bannerImgs.style.transition="all.2s";
}
//清除过渡效果
functionclearTransition(){
bannerImgs.style.webkitTransition="none";
bannerImgs.style.transition="none";
}
//设置移动距离
functionsetTranslateX(distance){
bannerImgs.style.webkitTransform="translateX("+distance+"px)";
bannerImgs.style.transform="translateX("+distance+"px)";
}
//控制小圆点
functionsetPoint(){
for(vari=0;i<Indexs.length;i++){
Indexs[i].className="";
}
Indexs[index-1].className="current";
}
//设置定时器
vartimer=setInterval(function(){
index++;
setTransition();
setTranslateX(screenWidth*index*-1);
},1000);
//添加过渡动画结束事件
bannerImgs.addEventListener("transitionend",function(){
if(index>8){
index=1;
}elseif(index<1){
index=8;
}
clearTransition();
setTranslateX(screenWidth*index*-1);
setPoint();
})
//添加touch事件
varstartX=0;
varmoveX=0;
varisMove=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++;
}elseif(moveX>0){
index--;
}
}
setTransition();
setTranslateX(index*screenWidth*-1);
timer=setInterval(function(){
index++;
setTransition();
setTranslateX(screenWidth*index*-1);
},1000);
})
}
精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。