旋转木马的实现支持移动端

Posted 2020-10-16

第一部分是html部分，外层父元素用相对定位，子元素用绝对顶对，通过改变top，left值改变他们的位置。
<div class="carousel">
        <div class="img1">
            <img src="images/f1.jpg" />
            <p>旋转木马1</p>
        </div>
        <div class="img2">
            <img src="images/f2.jpg" />
            <p>旋转木马2</p>
        </div>
        <div class="img3">
            <img src="images/f3.jpg" />
            <p>旋转木马3</p>
        </div>
        <div class="img4">
            <img src="images/f4.jpg" />
            <p>旋转木马4</p>
        </div>
        <div class="img5">
            <img src="images/f5.jpg" />
            <p>旋转木马5</p>
        </div>
        <p class="prev"><img src="images/arrow1.png" alt="arrow"/></p>
        <p class="next"><img src="images/arrow2.png" alt="arrow"/></p>
</div>

第二部分就是就是代码的实现

<script>
1.申明变量，保存获取的dom节点，定时器还有是否开启触摸。

var carousel=document.getElementsByClassName("carousel")[0]; 
var aitem=carousel.getElementsByTagName("div");
var prev=document.getElementsByClassName("prev")[0];
var next=document.getElementsByClassName("next")[0];
var autoplay=true;
var timer;
if(autoplay==true){
timer=setInterval(left,3000)
}
function right(){
var fn=new Array(); //创建一个新的数组
for(var i=0;i<aitem.length;i++){
fn.push(aitem[i].className) //遍历每个li的class类名，保存到一个新的数组里面
}
for(var j=0;j<aitem.length;j++){
if(j==aitem.length-1){
aitem[j].className=fn[0];
}
else{
aitem[j].className=fn[j+1];//向右切换时，遍历每个li，改变他们的class类名，逻辑上每个li的类名要变成原来类名的上一个，最后一个变成第一个类名
}
}
}
function left(){
var fn=new Array();//创建一个新的数组
for(var i=0;i<aitem.length;i++){
fn.push(aitem[i].className) //遍历每个li的class类名，保存到一个新的数组里面
}
for(var j=0;j<aitem.length;j++){
if(j==0){
aitem[0].className=fn[aitem.length-1];
}
else{
aitem[j].className=fn[j-1];//向右切换时，遍历每个li，改变他们的class类名，逻辑上每个li的类名要变成原来类名的上一个，第一个变成最后一个类名
}
}
}
prev.onclick=function(){
right(); //执行向右切换
}
next.onclick=function(){
left();//执行向左切换
}
function touch(){
var startx,movex;

绑定触摸的监听事件
carousel.addEventListener("touchstart",touchstart,false);
carousel.addEventListener("touchmove",touchmove,false);
carousel.addEventListener("touchend",touchend,false);
function touchstart(e){
clearInterval(timer)
sartx= e.changedTouches[0].clientX;//获取触摸开始时的x坐标

}
function touchmove(e){
movex= e.changedTouches[0].clientX-sartx; //获取触摸结束时手指移动的距离
}

判断手指移动的距离，执行向右切换或者向左切换
function touchend(){
if(movex>100){
right()           
}
if(movex<-100){
left()
}
timer=setInterval(left,3000)
}
}
touch()

</script>