当前位置: 首页 > Web前端 > HTML5

手机h5轮播插件swipe

时间:2023-04-05 20:27:04 HTML5

在手机h5页面中,我们经常会有轮播图片的需求。如果你不需要太多的效果,只是简单的手指滑动和自动旋转效果,我推荐swipe插件,但是百度搜索到的插件不是很全,我会添加你可能需要的功能。swipe.js是一个轻量级的js触控滑动库——SwipeJS。这是一个非常小的javascript类库,但是它的功能并不简单。可用于显示网页上的任意内容,支持精确的触摸和移动操作,还可以设置自动播放、比例缩放等实用功能。Swipe功能介绍下面介绍一下SwipeJS的使用。Swipe有如下参数:startSlide:4,//开始图片切换的索引位置auto:3000,//设置自动切换时间,以毫秒为单位continuous:true,//无限循环图片切换效果disableScroll:true,//防止由于触摸导致屏幕滚动stopPropagation:false,//停止滑动事件callback:function(index,element){},//回调函数,切换时触发transitionEnd:function(index,element){}//回调函数,当转换结束时调用这个函数。此外,还有一些比较常用的API方法,如:prev():上一页next():下一页getPos():获取当前页面的索引getNumSlides():获取所有项目slide的个数(index,duration):Swipemethod如何使用Swipe在了解了基本的功能方法之后,我们来看看使用方法。第一个是HTML结构:

然后样式代码:.swipe{overflow:hidden;可见性:隐藏;位置:相对;}.swipe-wrap{溢出:隐藏;position:relative;}.swipe-wrap>figure{浮动:左;宽度:100%;position:relative;}最后设置JS绑定和参数设置:varslider=Swipe(document.getElementById('slider'),{………………});这里只要把上面介绍的函数参数写进去,就可以实现相应的功能。最后我们还可以添加滑动切换的上下按钮:prevnext另外,我会做一些pager效果的pagination补充:如果需要分页点的效果,可以这样添加代码:nav标签部分是pager的相关部分,有多少litags因为有slides(如果需要pager效果的童鞋,加一个nav和ul标签就够了,因为代表分页点的li标签需要动态生成,如果动态加一个轮播模块!)对应的实例化代码(写法比较精简的童鞋可以用自己的方法):varslider=Swipe(document.getElementById('slider'),{auto:3000,continuous:true,callback:function(pos){vari=bullets.length;while(i--){bullets[i].className='';}bullets[pos].className='on';}});var幻灯片s=document.querySelectorAll('.swipe-wrapfigure').length;varliBox=document.getElementById('position');varliTab;for(vari=0;i