jQuery插件Touchslider触摸、⿏标操作幻灯⽚交互脚本
幻灯⽚、⾛马灯等⼀直是⽹页中⽐较常⽤的交互效果，在移动平台上也不例外，唯⼀的区别是操作⽅式不同，这⾥介绍⼀款同时适⽤于触摸、⿏标操作的幻灯⽚交互脚本 ——
优点：
1. 兼容性好，适⽤于主流的桌⾯及移动(基于Weibkit)浏览器，且同时兼容⿏标和触摸操作
2. 性能优秀，在 Android 和 iOS 等移动平台上的交互表现⾮常流畅
3. 可塑性⾼，通过插件本⾝的设置再配合 CSS 可以打造成幻灯⽚、⾛马灯等多种交互效果
不⾜：
1. 依赖 jQuery，需要额外加载 Javascript 脚本资源
2. 插件默认会将第⼆页的内容隐藏，如果想要平铺展⽰则需要修改 Javascript 脚本
Demo：
插件的有 Demo 展⽰。
如何使⽤：
1. 加载 Javascript 脚本：
<script src="jquery.min.js"></script>
<script src="uchslider.min.js"></script>
2. 插⼊ HTML 代码：
<div class="touchslider">
<div class="touchslider-viewport" >
<div>
<div class="touchslider-item"><!-- 这⾥是显⽰内容 --></div>
<div class="touchslider-item"></div>
...
</div>
</div>
<div>
<span class="touchslider-prev">←</span>
<span class="touchslider-nav-item touchslider-nav-item-current">1</span>
<span class="touchslider-nav-item">2</span>
...
<span class="touchslider-next">→</span>
</div>
</div>
3. 配置、调⽤ touchslider
<script>
jQuery(function($) {
$(".touchslider").touchSlider({
container: this,
duration: 350, // 动画速度
delay: 3000, // 动画时间间隔
margin: 5,
mouseTouch: true,
namespace: "touchslider",
next: ".touchslider-next", // next 样式指定
pagination: ".touchslider-nav-item",
currentClass: "touchslider-nav-item-current", // current 样式指定        prev: ".touchslider-prev", // prev 样式指定
scroller: viewport.children(),
autoplay: false, // ⾃动播放
viewport: ".touchslider-viewport"
});
});
</script>
⼿动开始或停⽌：
$(".touchslider").data("touchslider").stop(); // stop the slider
$(".touchslider").data("touchslider").start(); // start the slider
javascript幻灯片
4. ⾃定义样式：
样式需要结合具体的情况来定制，可以参照 Demo 中样式来修改。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。