我对 swipe.js 插件的理解

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

(1)首先,引入js文件

<script src='swipe.js'></script>

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

<style>
        .swipe {overflow: hidden;visibility: hidden;position: relative;}
        .swipe .swipe-wrap {overflow: hidden;position: relative;}
        .swipe .swipe-wrap > div { float: left; width: 100%; position: relative;}
        .swipe .swipe-wrap > div img {width: 100%;}
</style>
<div id='mySwipe' style='max-width:400px;margin:0 auto' class='swipe'>
      <div class='swipe-wrap'>
        <div><img src="img/01.jpg" alt=""></div>
        <div><img src="img/02.jpg" alt=""></div>
        <div><img src="img/03.jpg" alt=""></div>
        <div><img src="img/04.jpg" alt=""></div>
      </div>
</div>

(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):滑动方法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值