Xinsenz茶話

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

效果演示：请戳这里

html部分代码：
/*html*/

调用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; }