转载

基于Zepto的内容滑动插件：zepto.hwSlider.js

前段时间为给大家介绍了内容滑动插件：hwSlider.js，它是兼容PC和移动端的，但是是基于jQuery的。有朋友最近给我说要求把Zepto版的也放出来，于是乎就整了个zepto版的内容滑动插件，它同样支持PC和移动端，可以滑屏和自适应屏幕大小。

查看演示下载源码

Zepto由于它体积小，提供了与jQuery几乎相同的API，确实在移动端可以替代庞大的jQuery库。那么开发zepto插件和jquery插件稍微有点不同，具体可以看这篇文章： http://www.tuicool.com/articles/AZ77j2 。本文我们在前文 hwSlider-内容滑动切换效果（三）：jquery.hwSlide.js插件封装的基础上，将jQUery版的插件改成Zepto版。

HTML

HTML部分很简单，一个滑块列表#hwslider。

 <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>Helloweba</h4></li>  </ul> </div>

在页面中载入Zepto库文件以及插件js，然后调用插件。

 <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> <script src="js/zepto.hwSlider.js"></script> <script> $(function(){  $("#hwslider").hwSlider({   autoPlay: false, //是否自动播放   dotShow: true, //是否显示圆点导航   touch: true //是否支持触摸滑屏切换  }); }); </script>

CSS

这里提供最基本的CSS，将滑块内容布局好。

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

那么在这里我要说明的是，Zepto一般用在移动端，zepto也提供了类似jQuery的animate动画函数，但是据说新能比较差，而且需要另外调用。所以在移动端的动画效果我们提倡使用CSS3动画来实现。

CSS3的animate与关键帧动画keyframes结合完全可以实现性能优良的动画效果。

 .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%);  } }