您的位置：首页 > 移动开发

移动端图片左右滑动效果

2017-04-28 23:51 323 查看
在移动端的网站或者APP中，图片左右滑动很常见，用户的体验也非常不错。我只要使用JQuery来实现此效果。话不多说，直接上代码。

1.html，css部分

html部分：

<div>
<ul >
<li ><img src="image/change_img/3.jpeg" ></li>
<li ><img src="image/change_img/4.jpeg" ></li>
<li ><img src="image/change_img/5.jpeg" ></li>
</ul>
</div>


注意点：要实现图片左右滑动，必须将所以的 li 并排在同一行，如下图所示。



要实现把ul下的所以li并排显示，需要在ul中设置，
white-space:nowrap;
，这里还有一点需要注意，设置完ul后，每个li之间会默认有几个像素的间隔，显然这不是我们想要的，所以我们需要在ul中在设置一个属性来消除li之间的间隔，这个属性就是：
font-size: 0;


设置完html和css部分的代码后，我们就需要编写JS部分的代码了，这样我们就能实现动态图片左右滑动效果了。

2.JS代码

实现思路：首先要获取这几个属性值：屏幕的宽度，li的总数量，点击图片的索引值，以及左右滑动的距离。

$('li').on('touchstart',function(e
4000
vent){
//screenWidth:屏幕分辨率宽度
var screenWidth = $(window).width();
var that = this;
//获取ul下的li总数
var liCount = $('ul li').length;
//index:获取当前被点击的图片的索引值
var index = $(that).index();
//最小滑动距离，当左右滑动距离小于这个值时，图片返回原位置，不产生向左或者向右切换图片的效果
var minMoveDis = 100;
//获取点击x坐标
var _touch = event.originalEvent.targetTouches[0];
var clickX = _touch.pageX;
$("li").on('touchmove',function(event){
//移动过程中，距离最开始点击位置的X距离
var _sectouch = event.originalEvent.targetTouches[0];
var distance = _sectouch.pageX - clickX ;
var moveX = distance*(-1) + screenWidth * index * (-1);
$('li').css("transform","translate3d("+moveX+"px,0,0)");
//滑动事件结束时
$('li').on('touchend',function(){
if (0 < distance < minMoveDis ) {
moveX = index *screenWidth*(-1);
}
if(distance >=minMoveDis ){
moveX = (index+1) *screenWidth*(-1);
}
if(distance <=0){
moveX = (index-1) *screenWidth*(-1);
}
$('li').css("transform","translate3d("+moveX+"px,0,0)");
$('li').off('touchmove');
});
});
});


实现功能过程中遇到的坑点：① 移动端touch事件对应PC端的mouse事件，和mouse事件不同的是，在移动端没有offset属性，所以我们使用page属性来代替。

②移动端直接使用event.pageX是无法正常获取属性值得，必须写这么一句：var _touch = event.originalEvent.targetTouches[0]; 然后在获取触摸点的pageX的值：var moveX = _touch.pageX;

以上就是所有的内容，若有不足之处，欢迎大家交流讨论，让我们共同进步。O(∩_∩)O~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航