jquery响应式幻灯片unslider

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

效果演示:请戳这里

html部分代码:
/*html*/

  • xinsenz.com

  • xinsenz.com

  • xinsenz.com

  • xinsenz.com

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

/*js*/

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 条评论

发表评论

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