推荐轮播插件--touchSlidertouchSlider
2014-10-22 11:43
176 查看
touchSlider
github地址:https://github.com/qiqiboy/touchslider演示地址:http://touchslider.com
默认参数说明
_default: {
'id': 'slider', //string|elementNode 幻灯容器的id或者该节点对象
'begin': 0, //Number 默认从第几个幻灯开始播放,从0开始
'auto': true, //bool 是否自动播放
'speed':600, //Number 动画效果持续时间,单位是毫秒
'timeout':5000, //Number 幻灯播放间隔时间,单位毫秒
'direction':'left', //string left|right|up|down 播放方向,四个值可选
'align':'center', //string left|center|right 对齐方向(fixWidth=true情况下无效),靠左对齐(ipad版appStore上截图展现方式)、居中对齐(iphone版appStore上截图展现方式)、靠右对齐
'fixWidth':true, //bool 默认会将每个幻灯宽度强制固定为容器的宽度,即每次只能看到一张幻灯;false的情况参见下方第一个例子
'mouseWheel':false, //bool 是否支持鼠标滚轮
'mouseDrag':true, //bool 是否支持鼠标拖拽切换
'before':new Function(), //Function 幻灯切换前, before(newIndex, oldSlide)
'after':new Function() //Function 幻灯切换后, after(newIndex, newSlide)
}
var slider=new TouchSlider();
slider.pause();//暂停播放
slider.play();//开始播放
slider.prev();//上一张
slider.next();//下一张
slider.stop();//停止播放(暂停并回到第一张)
slider.append(newLi);//末尾添加一个幻灯项,参考下边第二个幻灯示例
slider.prepend(newLi);//开头添加一个幻灯项
slider.remove(index);//删除第index个幻灯,slider.remove(1)
slider.insertBefore(newLi,index);//在第index幻灯前插入一个幻灯项
一些例子:
full-width 类型:容器宽度自适应,幻灯宽度不固定,居中对齐(iphone版appStore上截图展现方式)
调用方式:new TouchSlider('slider',{speed:600, timeout:3000, direction:'left', mouseDrag:false, fixWidth:false})
12
3
4
5
暂停
播放 上一张
下一张
full-width 类型:容器宽度自适应,幻灯宽度不固定,靠左对齐(ipad版appStore上截图展现方式)
调用方式:new TouchSlider('slider',{speed:600, timeout:3000, direction:'left',align:'left', fixWidth:false})
12
3
4
5
暂停
播放 上一张
下一张
增加
删除
250px-width 类型:容器宽度250px,固定宽度幻灯,方向向上滚动
调用方式:new TouchSlider('slider2',{'auto':false, begin:1, speed:600, timeout:3000, direction:'up'})
1暂停
播放 上一张
下一张
Full-width 类型:容器宽度自适应,幻灯宽度固定
调用方式:new TouchSlider('slider',{speed:600, timeout:3000, mouseWheel:true})
1暂停
播放 上一张
下一张
image slider new TouchSlider('slider4',{'auto':true, speed:600, timeout:6000})
页码实现方式一(未加状态标识): 1 2 3 4
页码实现方式二: 1 2 3 4
暂停
播放 上一张
下一张
相关文章推荐
- 推荐轮播插件--touchSlidertouchSlider
- 基于JQuery的轮播图插件nivo-slider使用教程
- 基于JQuery的轮播图插件nivo-slider使用教程
- Javascript自定义插件slider使用(首页图片轮播)
- jQuery 插件 Touchslider触摸、鼠标操作幻灯片交互脚本
- coin slider 幻灯片轮播插件
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
- 基于JQuery的轮播图插件nivo-slider使用教程
- SmallSlider 图片轮播插件
- 基于JQuery的轮播图插件nivo-slider使用教程
- jquery flexslider 轮播插件
- 一个图片轮播插件---Nivo Slider
- VS Code 折腾记 - (11) 再来一波插件推荐!(代码片段,框架,Node,touchbar,TS,Git,数据库,python!!)
- 图片轮播插件jquery.smallslider.js
- vue轮播图插件vue-concise-slider的使用
- 轮播插件--Flexslider图片轮播、文字图片相结合滑动切换效果
- 移植性很高的jquery图片轮播插件 推荐
- 轮播图切换效果(flexslider插件)实现
- coin slider 幻灯片轮播插件