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

移动端手指滑动实现轮播效果

2017-11-16 15:27 926 查看

之前，在网上看到一个移动端的租房界面，里边的房屋类型展现是以轮播形式出现的，和以往一样没感觉什么不同。。。但是仔细思考一下，我们平常做的轮播图要不是通过按钮触发下一个图片，要不就是给定一个时间函数，比如3000ms后自动跳转，诸如此类的一些。那么问题来了，手机上是怎样做到通过手指触摸滑动发生跳转的

通过查询后，我了解到这是 jquery 的一个插件 swipe.js .

代码如下，仅供参考

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机焦点滑动轮播图</title>
<meta content="width=device-width,minimum-scale=1,maximum-scale=1,shrink-to-fit=no,
user-scalable=no,minimal-ui" name="viewport">
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
}
/* Swipe 2 required styles */

#lunbotu {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
/* END required styles */
.swipe-wrap img{
width: 30%;
}
.yuandian {
right:10px;
bottom:5px;
position: absolute;
/*height: 40px;*/
}
.yuandian li{
width: 13px;
height: 13px;
border-radius: 50%;
background: floralwhite;
float: left;
margin-right: 10px;

}
.yuandian .cur{
background:red;
}

</style>
<body>
<div id="lunbotu">
<div class="swipe-wrap">    <!--此处class的名称是固定的-->
<div><img src="1.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
<div><img src="2.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
<div><img src="3.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
<div><img src="4.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
<div><img src="5.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
<div><img src="6.jpg" alt="" / style="padding-left:8px;padding-right:10px;"><img src="4.jpg" alt="" / style="padding-right:10px;"><img src="2.jpg" alt="" /></div>
</div>
<ul class="yuandian">
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src='js/swipe.js'></script>
<script>

// pure JS
var elem = document.getElementById('lunbotu');
window.mySwipe = Swipe(elem, {
// startSlide: 4,
auto: 3000,        //每隔3000ms，自动轮播一次
// continuous: true,
// disableScroll: true,
// stopPropagation: true,

//        回调函数表示没做完一个轮播，就执行下面的内容
callback: function(index, element) {
//             console.log(index);           //在控制台输出index的值

//             让自己的li添加cur类，其他的兄弟li移除cur类，也就是一种排他
$(".yuandian li").eq(index).addClass("cur").siblings().removeClass("cur");

}
// transitionEnd: function(index, element) {}
});

//    点击小圆点，图片会有一个slide的效果
$('.yuandian li').click(function(){
mySwipe.slide($(this).index());
});

// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

</script>
</body>
</html>

效果如下，pc端通过按钮进行切换，移动端手指触摸即可，在不做任务处理时是自动播放的：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航