Question

jquery.touchslider.js怎么用?救急,江湖救急!!!

Answer 1

1. 加载 Javascript 脚本：
<script src="jquery.min.js"></script>
<script src="jquery.touchslider.min.js"></script>

2. 插入 HTML 代码：
<div class="touchslider">
<div class="touchslider-viewport" style="width:500px;overflow:hidden">
<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

4. 自定义样式：
样式需要结合具体的情况来定制，可以参照官网 Demo 中样式来修改