在网站建设的过程中，我们经常会使用到jQuery图片切换的功能，关于该功能实际上非常简单， 但是写起来需要一些精力，所以佚站互联在这里提供一个jQuery图片切换的插件供大家使用，有兴趣的朋友可以参考一下。
该插件的名字叫Swipe，是由国外达人分享的插件。
简单的jQuery图片切换
使用方式：
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
发表回复