滑动图片的实现方式 2013-12-23
研究了一上午的图片滑动事件,有点小成。
css代码是这样的:
<ul class="ul-images" id="ulImages">
<li style="display:block;">
<img src="images/home/1.jpg" />
<p class="flex-caption">Swipe this picture, left or right!</p>
</li>
<li style="display:none;">
<img src="images/home/2.jpg" />
<p class="flex-caption">Come on! Swipe the picture!</p>
</li>
<li style="display:none;">
<img src="images/home/3.jpg" />
<p class="flex-caption">Really! Please swipe the picture</p>
</li>
<li style="display:none;">
<img src="images/home/4.jpg" />
<p class="flex-caption">Well? Are you gonna swipe?!</p>
</li>
</ul>
然后要实现图片的轮流切换,在网上找了一下,
//左右滑动图片的事件。
var startX, startY, endX, endY;
document.getElementById("ulImages").addEventListener("touchstart", touchStart, false);
document.getElementById("ulImages").addEventListener("touchmove", touchMove, false);
document.getElementById("ulImages").addEventListener("touchend", touchEnd, false);
function touchStart(event) {
event.preventDefault();
var touch = event.touches[0];
startY = touch.pageY;
startX = touch.pageX;
}
function touchMove(event) {
var touch = event.touches[0];
endX = touch.pageX;
}
function touchEnd(event) { event.preventDefault();
var index=$("#ulImages>li").index($("#ulImages>li:visible"));
//$("#ulImages>li").eq(index).hide();
if ((startX - endX) < 5) {//右滑动
//alert("左滑动");alert("开始"+startX);
if(index>0){$("#ulImages>li").eq(index).hide();index--;}
// alert("结束"+endX);
}else if((endX - startX) < 5){//左滑动
// alert("右滑动");alert("开始"+startX);
if(index<$("#ulImages>li").length-1){$("#ulImages>li").eq(index).hide();index++;}
// alert("结束"+endX);
}
$("#ulImages>li").eq(index).show();
}
这样做出来的效果很生涩,切换不灵活,只需要阻止浏览器的默认行为即可.在各个事件的开始加上event.preventDefault()即可。但是这个时候我发现网右边滑动时,endX-startX>0,反之往左边滑动时startx-startY>0.很纠结这个。不过还好问题解决了。。。。哦行
正确的如下:
//左右滑动图片的事件。
var startX, startY, endX, endY;
document.getElementById("ulImages").addEventListener("touchstart", touchStart, false);
document.getElementById("ulImages").addEventListener("touchmove", touchMove, false);
document.getElementById("ulImages").addEventListener("touchend", touchEnd, false);
function touchStart(event) {
event.preventDefault();
var touch = event.touches[0];
startY = touch.pageY;
startX = touch.pageX;
}
function touchMove(event) { event.preventDefault();
var touch = event.touches[0];
//endY = (startY - touch.pageY);
endX = touch.pageX;
}
function touchEnd(event) { event.preventDefault();
var index=$("#ulImages>li").index($("#ulImages>li:visible"));
//$("#ulImages>li").eq(index).hide();
if ((startX - endX) > 5) {//右滑动
//alert("左滑动");alert("开始"+startX);
if(index>0){$("#ulImages>li").eq(index).hide();index--;}
// alert("结束"+endX);
}else if((endX - startX) > 5){//左滑动
// alert("右滑动");alert("开始"+startX);
if(index<$("#ulImages>li").length-1){$("#ulImages>li").eq(index).hide();index++;}
// alert("结束"+endX);
}
$("#ulImages>li").eq(index).show();
}
})
接着我还会找一下通过position来实现图品切换的方法。