柠檬铺

jQuery图片轮播特效

—

由

柠檬铺
于

在网站建设的过程中，我们经常会使用到jQuery图片切换的功能，关于该功能实际上非常简单， 但是写起来需要一些精力，所以佚站互联在这里提供一个jQuery图片切换的插件供大家使用，有兴趣的朋友可以参考一下。

该插件的名字叫Swipe，是由国外达人分享的插件。

使用方式：

1.定义图片切换区域
<div id='slider' class='swipe'>   <div class='swipe-wrap'>     <div></div>     <div></div>     <div></div>   </div> </div>

 

2.在JS中初始化对象，最好放置在页面下方（符合优化网站原则）
window.mySwipe = Swipe(document.getElementById('slider'));

 

3.通过CSS自定义各元素风格，从而符合你的需求

.swipe {   overflow: hidden;   visibility: hidden;   position: relative; } .swipe-wrap {   overflow: hidden;   position: relative; } .swipe-wrap > div {   float:left;   width:100%;   position: relative; }

 

除此之外，该插件还提供几个API函数方便进行参数修改，函数如下：

1. startSlide  整型（默认值0）Swipe开始进行图片切换的索引位置。

2. speed 整型（默认值300）Swipe进行图片切换的变化时间，单位毫秒。

3. auto 整型 开始进行自动切换，单位毫秒。

4. continuous 布尔型（默认值true）建立一个无限循环的图片切换效果。

5. disableScroll 布尔型（默认false）阻止由于触摸而滚动屏幕。

6. callback 返回函数 在切换的时候调用该函数。

7. transitionEnd 返回函数 在切换结束调用该函数。

 

调用API实例：

window.mySwipe = new Swipe(document.getElementById('slider'), {
    startSlide: 2,
    speed: 400,
    auto: 3000,
    continuous: true,
    disableScroll: false,
    stopPropagation: false,
    callback: function(index, elem) {},
    transitionEnd: function(index, elem) {}
});  

总结：该插件非常简洁方便好用，而且提供的API也非常丰富，如果您正在寻找jQuery图片切换插件，那么就赶紧来尝试一下吧！

Demo地址：http://www.ningmop.com/demos/swipe

Github插件地址：https://github.com/bradbirdsall/Swipe