基于Zepto的响应式内容、图片滑动插件zepto.hwSlider.js

安装方法：

载入zepto.min.js库文件

载入插件zepto.hwSlider.js

配置插件：

$(function(){ 
    $("#hwslider").hwSlider({ 
        autoPlay: false, //是否自动播放 
        dotShow: true,    //是否显示圆点导航 
        touch: true //是否支持触摸滑屏切换 
    }); 
}); 

放置HTML内容：

<div id="hwslider" class="hwslider"> 
    <ul> 
        <li class="active"><img src="images/s1.jpg" alt="1" width="100%">li> 
        <li><a href="#"><img src="images/s2.jpg" alt="2" width="100%">a>li> 
        <li><h4>Hellowebah4>li> 
    ul> 
div> 

添加CSS样式（放置到你的CSS文件或新建一个都可以）

#hwslider ul li:last-child{background: #f90; text-align: center;}
#hwslider ul li h4{height:42px; margin: 22% auto;font-size: 36px; color: #fff}	
.hwslider{width: 100%;height:auto;min-width:280px;min-height: 160px;margin:20px auto; position: relative; overflow: hidden;}
.hwslider ul{width: 100%; height:100%; position: absolute; z-index: 1}
.hwslider ul li{display:none;position:absolute; left:0; top:0; width: 100%;height:100%; overflow: hidden;}
.hwslider ul li.active{display: block;}
.hwslider ul li img{width:100%;max-width: 100%; height:auto;display: block}
.dots{position: absolute; bottom:20px; left:200px; min-width:60px; height: 12px; z-index: 2;}
.dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;}
.dots span.active{background:orangered}
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none}
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;}
.hwslider:hover .arr{display: block; text-decoration: none;color: #fff}
.prev{left: 20px}
.next{right: 20px}
.movein_right{
	-webkit-animation: slidein_right .5s forwards ease-in;
	animation:slidein_right .5s forwards ease-in;
}
.moveout_right{
	-webkit-animation: slideout_right .5s forwards ease-in;
	animation:slideout_right .5s forwards ease-in;
}
.movein_left{
	-webkit-animation: slidein_left .5s forwards ease-in;
	animation:slidein_left .5s forwards ease-in;
}
.moveout_left{
	-webkit-animation: slideout_left .5s forwards ease-in;
	animation:slideout_left .5s forwards ease-in;
}
@-webkit-keyframes slidein_left{
	from {
		-webkit-transform: translateX(-100%);
	}
	to {
		-webkit-transform: translateX(0);
	}
}
@keyframes slidein_left {
	from {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	to {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@-webkit-keyframes slideout_left{
	from {
		-webkit-transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(100%);
	}
}
@keyframes slideout_left {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}
@-webkit-keyframes slidein_right{
	from {
		-webkit-transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(0);
	}
}
@keyframes slidein_right {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@-webkit-keyframes slideout_right{
	from {
		-webkit-transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-100%);
	}
}
@keyframes slideout_right {
	from {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	to {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

我们通过Zepto的addClass()方法将css中的左右滑动动画class加入到对应的滑块元素中就可以了。另外需要注意的是zepto下的手势触屏事件touchstart和touchend略要处理下。