简单的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 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku