我对 swipe.js 插件的理解

lastSeries 发布于2019-08-20 12:34 / 3328人阅读

摘要：是不依靠第三方插件，一个轻量级实现无缝轮播图的插件，当然，对于第一次使用的我，是完全蒙圈的，所以在此跟各位分析一下我的使用和理解。

swipe.js是不依靠第三方插件，一个轻量级实现无缝轮播图的插件，当然，对于第一次使用的我，是完全蒙圈的，所以在此跟各位分析一下我的使用和理解。

（1）首先，引入js文件

（2）按插件要求在html文件中写好结构，基础结构如下，以及基本css样式
注意：行内样式的max-width属性值可以根据自己的需要修改。如果需要角标按钮等样式，也可以按需要直接添加，添加后自己添加css样式即可

（2）准备工作已经完成，接下来就是自己需要添加的js代码

var ele = document.getElementById("#mySwipe");
window.mySwipe = Swipe(ele,{ 
    startSlide: 0,/*开始是第几页*/ 
    auto: 2000,/*自动播放的时间间隔*/ 
    continuous: true
});

通过查看swipe.js源码，Swipe函数有两个参数，第一个是需要控制的轮播图，第二个元素就是我们传入的配置项，如果什么也不写，就会使用默认的配置项；函数Swipe的返回值是一个对象，对象中有多个方法，即mySwipe是个全局对象(因为添加到了window对象上)，同时这个对象还拥有了函数中定义的方法，可以直接通过点语法调用。

此时，轮播图已经完成。

（3）拓展

需要添加角标的话：通过callback来改变角标样式（写在配置项中）

 callback: function(index, element) {
      //把第index个li变亮
      //把全部的变暗
      $("#mySwipe li").css("background-color","red");
     $("#mySwipe li").eq(index).css("background-color","#fff");
}

添加按钮效果，直接使用点语法调用

$("#right_btn").on("click",function(){
    window.mySwipe.next();
});
$("#left_btn").on("click",function(){
    window.mySwipe.prev();
});

常用API：
prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

私有云服务器托管云计算的理解 cdn的理解对大数据的理解 ajax的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81057.html

移动端h5轮播插件swipe

摘要：在移动端的页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大家补充下可能需要的功能。在移动端的h5页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐swipe插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大...

funnyZhang 2019-08-22 13:58 评论0 收藏0
移动端h5轮播插件swipe

摘要：在移动端的页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大家补充下可能需要的功能。在移动端的h5页面里，我们经常会有轮播图的需求，如果不需要太多的效果，只是简单的手指滑动和自动轮换效果的话，我比较推荐swipe插件，不过百度搜索到的这个插件，里面介绍的不是很完整，我给大...

Juven 2019-08-29 14:16 评论0 收藏0
Swipe 移动端滑动插件使用详解

摘要：前言最近需要开发一个新的微信活动平台，手机端主页需要用到一个幻灯片。简介是一个轻量级的移动滑动组件，这点从文件大小不难看出。它支持的触摸移动，阻力以及防滑。单纯从移动端来使用，应该满足基本的需求了。前言最近需要开发一个新的微信活动平台，手机端主页需要用到一个幻灯片。因为好一段时间没有全部手写移动端页面了，遂又重新找了一个下有没有什么好的幻灯片插件，毕竟重复造轮子没有必要啊。综合比...

ZHAO_ 2019-08-21 14:35 评论0 收藏0
react高仿掘金移动版，支持服务端渲染

摘要：一个高仿的掘金，大部分是按照掘金的来实现的，个别地方就根据自己想法修修改改，只做了移动端的部分，还做的部分就要花太多时间了，支持服务端渲染等，写这个项目主要是对近几个月所学的技术做个实践，看看有哪里还有不足，以及在实际开发的时候会踩到哪些 react-juejin 一个高仿的掘金，大部分是按照掘金的ui来实现的，个别地方就根据自己想法修修改改，只做了移动端的部分，还做pc的部分就要花太...

longshengwang 2019-08-23 12:39 评论0 收藏0