TouchSlider实现图片滑动效果

能够实现pc端和移动端图片平滑滑动的效果

默认参数：

_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幻灯前插入一个幻灯项

例子

<div class="banner">
    <ul id="indexSlider">
        <li><img src="/images/offi_sylut.png" /></li>
        <li><img src="/images/offi_sylut.png" /></li>
    </ul>
    <div id="pagenavi">
        <a href="javascript:void(0);" class="active"></a>
        <a href="javascript:void(0);"></a>
    </div>
</div>

var active=0,as=document.getElementById('pagenavi').getElementsByTagName('a');
for(var i=0;i<as.length;i++){
    (function(){
        var j=i;
	as[i].onclick=function(){
	    t4.slide(j);
	    return false;
	}
    })();
}
var t4=new TouchSlider({
    id:'indexSlider', 
    speed:500, 
    timeout:3000,
    before:function(index){
        as[active].className='';
	active=index;
	as[active].className='active';
    }
});

参考地址：https://github.com/qiqiboy/touchslider

网盘地址：http://pan.baidu.com/s/1gdu0rdT

转载于:https://my.oschina.net/juntercode/blog/340015