推荐轮播插件--touchSlidertouchSlider

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})

  • 1
  • 2
  • 3
  • 4
  • 5
   

full-width 类型：容器宽度自适应，幻灯宽度不固定，靠左对齐（ipad版appStore上截图展现方式） 
调用方式：new TouchSlider('slider',{speed:600, timeout:3000, direction:'left',align:'left', fixWidth:false})

  • 1
  • 2
  • 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


    


posted @ 2014-10-22 11:43  木尘-MCDNF  阅读(689)  评论(0)  编辑  收藏  举报