jquery响应式幻灯片unslider

unslider.js
这里说的是unslider.js,是一款国外超简洁的响应式幻灯片,不到3KB的大小,支持触摸屏(需jQuery.event.swipe插件),支持键盘导航,修改、定制也相当容易。

效果演示:请戳这里

html部分代码:

/*html*/
<div class="theBanner">
  <ul>
    <li style="background:url(1.jpg)"><p>xinsenz.com</p></li>
    <li style="background:url(2.jpg)"><p>xinsenz.com</p></li>
    <li style="background:url(3.jpg)"><p>xinsenz.com</p></li>
    <li style="background:url(4.jpg)"><p>xinsenz.com</p></li>
  </ul>
</div>

调用js,需提前下载unslider.min.js并上传到你的空间(戳我下载):

/*js*/
<script src="jquery.js"></script>
<script src="unslider.min.js"></script>
 
if(window.chrome) {
  $('.theBanner li').css('background-size', '100% 100%');
}
$('.theBanner').unslider({
  fluid: true,  //响应式
  speed: 500,   //速度        
  delay: 2500,  //延迟
  dots: true    //点
});

css部分:

/*css*/
.theBanner { position: relative; overflow: auto; }
.theBanner li { list-style: none; height: 406px; background-size:2000px 500px;}
.theBanner ul {margin:0px; padding:0px;}
.theBanner ul li { float: left; }
.theBanner .dots { position: absolute; left: 0; right: 0; bottom: 20px; }
.theBanner .dots li { display: inline-block; width: 10px; height: 10px; margin: 0 4px; text-indent: -999em; border: 2px solid #fff; border-radius: 6px; cursor: pointer; opacity: .4; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; }
.theBanner .dots li.active { background: #fff; opacity: 1; }

共有 9 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注