旋轉木馬的實現支援移動端

標籤：image   var   觸摸   src   array   clientx   tar   add   木馬   

第一部分是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>

旋轉木馬的實現支援移動端