《前端》jQuery- TouchSlider(现在我觉得不如直接用轮播图,见末尾)

 TouchSlider--提供一个可以方便实现全平台(PC及移动端触摸界面)的幻灯slider效果。

http://www.bcty365.com/content-47-2546-1.html(内含Touchslider插件下载

TouchSlider是jQuery的一个轻量级插件。在移动平台上是一款同时适用于触摸、鼠标操作的幻灯片交互脚本(好像这个TouchSlider在pc端就像是轮播图的效果)。官网: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 是否支持鼠标滚轮
    'before':new Function(), //Function 幻灯切换前, before(newIndex, oldSlide)
    'after':new Function() //Function 幻灯切换后, after(newIndex, newSlide)
}

一些常用接口方法

var slider=new TouchSlider(config);//config为配置参数,见上边说明
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幻灯前插入一个幻灯
slider.slide(index, speed)://滑动到第index个幻灯项,速度为speed参数
slider.resize(
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值