本文摘自PHP中文网,作者小云云,侵删。
swipe.js是一个轻量级js触摸滑动类库 ?C Swipe JS。这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。在移动端的h5页面里,我们经常会有轮播图的需求,如果不需要太多的效果,只是简单的手指滑动和自动轮换效果的话,我比较推荐swipe插件,不过百度搜索到的这个插件,里面介绍的不是很完整,我给大家补充下可能需要的功能。
Swipe函数介绍
下面就为大家介绍下Swipe JS的使用方法,Swipe有以下几个参数:
1 2 3 4 5 6 7 | startSlide: 4,
auto: 3000,
continuous: true,
disableScroll: true,
stopPropagation: false,
callback: function (index, element) {},
transitionEnd: function (index, element) {}
|
除此之外,还有一些比较常用的API方法,例如:
1 2 3 4 5 | prev():上一页
next():下一页
getPos():获取当前页的索引
getNumSlides():获取所有项的个数
slide(index, duration):滑动方法
|
Swipe使用方法
了解基本函数方法后,我们就来看看使用方法。
首先是HTML结构:
1 2 3 4 5 6 7 | <p id= "slider" class = "swipe" >
<p class = "swipe-wrap" >
<p></p>
<p></p>
<p></p>
</p>
</p>
|
然后是样式代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > figure {
float: left;
width: 100%;
position: relative;
}
|
最后设置JS绑定以及参数设置:
1 2 3 4 | var slider = Swipe(document.getElementById( 'slider' ), {
…………
…………
});
|
在这里只要把上面介绍的函数参数写在里面,就可以实现相对应的功能。
最后我们也可以给滑动切换添加上下按钮:
1 2 | <button onclick= "Swipe.prev()" >prev</button>
<button onclick= "Swipe.next()" >next</button>
|
另外我进行一些分页器效果的补充吧:
如果需要分页那个点的效果的话,可以这么添加代码:
nav标签部分就是分页器的相关部分拉,多少个slide就多少个li标签(如果需要分页器效果的童鞋就添加一个nav和ul标签即可,因为代表分页点的li标签需要动态生成,如果你是动态添加的轮播模块!)
1 2 3 4 5 6 7 8 | <nav>
<ul id= "position" >
<!-- <li class = "on" ></li>
<li class = "" ></li>
<li class = "" ></li>
<li class = "" ></li> -->
</ul>
</nav>
|
对应的实例化代码(有更简化写法的童鞋可以用自己的方法):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var slider = Swipe(document.getElementById( 'slider' ), {
auto: 3000,
continuous: true,
callback: function (pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ' ;
}
bullets[pos].className = 'on' ;
}
});
var slides = document.querySelectorAll( '.swipe-wrap figure' ).length;
var liBox = document.getElementById( 'position' );
var liTab;
for ( var i = 0; i < slides; i++) {
liTab = document.createElement( 'li' );
if (i == 0) {
liTab.className = 'on' ;
}
liBox.appendChild(liTab);
};
var bullets = document.getElementById( 'position' ).getElementsByTagName( 'li' );
|
还有个关键的地方,这个插件在手指滑动过一次slide模块后就会stop了,不会再自动轮播,这时候需要到swipe.js里去修改一下源码:
这样这个插件基本就能正常运行满足你最基本的需求了。
相关推荐:
Swiper在移动端的用法
vue swiper实现组件化开发详解
JS中Swiper的用法介绍
以上就是移动端h5轮播插件swipe实例详解的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5+a*算法实现游戏寻路的代码分享
介绍HTML5语义元素实例
h5 语义化标签介绍
HTML5 canvas画布详解(一)
h5的页面中怎样调用app功能
HTML5中的强制下载属性download使用
HTML5生成柱状图(条形图)效果的实例代码
h5里js和servlet实现文件上传的实现步骤
关于h5的pushstate和replacestate的用法分析
HTML5 source type有什么用处?HTML5 source标签的详细介绍
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 移动端h5轮播插件swipe实例详解