幻灯片Unslider

图片滚动效果必不可少的网页特效，Unslider一款非常轻量的 jQuery 插件，是我见过的最棒的图片滑动效果，简单灵活，自适应宽高，支持响应式布局，支持键盘导航。故特意加入H-ui框架中。

如何使用?

HTML代码

<section class="slider cl has-dots">
  <a href="javascript:void(0)" class="unslider-arrow prev"></a><!--上一张控制按钮-->
  <a href="javascript:void(0)" class="unslider-arrow next"></a><!--下一张控制按钮-->
  <!--左右控制按钮，如果不需要可以直接删除代码。-->
  <ul class="tabcon">
    <li><img name="" src="pic/1.png" width="300" height="150" alt=""></li>
    <li><img name="" src="pic/2.png" width="300" height="150" alt=""></li>
    <li><img name="" src="pic/3.png" width="300" height="150" alt=""></li>
  </ul>
</section>       

CSS代码

.slider{ position:relative;text-align:center}
.slider .tabcon li{float: left;overflow:hidden}/*自适应宽高*/
.dots{position:absolute;right:0px; width:100%;bottom:10px; text-align:center} /*修改text-align 值 可以调整控制点是居中、居右、居左*/
.dots span{display:inline-block;text-align:center;width:8px; height:8px; font-size:0px;line-height:0px;margin-right:8px;cursor:pointer; background-color:#C2C2C2;-khtml-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}
.dots span.active{ background-color:#222}
/*数字方框控制*/
.numSlider .dots span{width:20px; height:20px; line-height:20px; font-size:13px; margin-right:10px;line-height:20px;background-color:#fff;font-family:Arial;font-weight:bold;text-indent:inherit;-khtml-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px}
.numSlider .dots span.active{background-color:#222;color:#fff}
/*长方条控制*/
.boxSlider .dots span{ width:40px; height:10px;-khtml-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px}
/*圆角长方条控制*/
.boxRadius .dots span{ width:40px}
.unslider-arrow{ display:block; position:absolute; top:50%; margin-top:-25px;height: 50px;width: 50px; z-index:3;opacity: 0.7;filter: alpha(opacity=70); background-color:#303030; background-image:url(../images/unslider-arrow.png); background-repeat:no-repeat}
.prev{ left:0px; background-position:0 0}
.next{ right:0px;background-position:right 0}

默认dots为圆点，在slider后面追加numSlider样式就变成带数字的方框，boxSlider为不带数字长方条，boxRadius为不带数字圆角长方条

<section class="slider numSlider cl has-dots">……</section>
<section class="slider boxSlider cl has-dots">……</section>
<section class="slider boxRadius cl has-dots">……</section>

js 代码

引入jQuery 和 Unslider

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/unslider.min.js"></script>

调用代码：

$(function() {
if(window.chrome){$('.slider li').css('background-size', '100% 100%')}
  $('.slider').unslider({
  speed: 500,               //  滚动速度
  delay: 3000,              //  动画延迟
    complete: function() {},  //  动画完成的回调函数
  keys: true,               //  启动键盘导航
    dots: true,               //  显示点导航
    fluid: true               //  支持响应式设计
  });
  // 左右控制js
  var unslider = $('.slider').unslider();
  $('.unslider-arrow').click(function(){
    var fn = this.className.split(' ')[1];
    unslider.data('unslider')[fn]();
  });
});

图片资源