星之书笔记这是一个超级简单的响应式轮播图，基于jquery封装的代码，整体下来不到3kb。它最原本在GitHub上放着，不过后来项目被移除，所以在在这里给大家分享一下。
<!DOCTYPE html>
<html>
<head>
<title>Wien Designs</title>
<meta name="author" content="Wien Designs">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
*{margin:0;padding:0;}
.banner{position:relative;width:100%;overflow:auto;font-size:18px;line-height:24px;text-align:center;color:rgba(255,255,255,.6);background:#5b4d3d;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.banner ul{list-style:none;width:300%;}
.banner ul li{display:block;float:left;width:33%;min-height:350px;background-size:100% 100%;}
.banner .inner{padding:160px 0 110px;}
.banner h1,.banner h2{font-size:40px;line-height:52px;color:#fff;}
.banner .btn{display:inline-block;margin:25px 0 0;padding:9px 22px 7px;clear:both;color:#fff;font-size:12px;font-weight:bold;text-transform:uppercase;text-decoration:none;border:2px solid rgba(255,255,255,.4);border-radius:5px;}
.banner .btn:hover{background:rgba(255,255,255,.05);}
.banner .btn:active{-webkit-filter:drop-shadow(0 -1px 2px rgba(0,0,0,.5));}
.banner .dots{position:absolute;left:0;right:0;bottom:20px;}
.banner .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;}
.banner .dots li.active{background:#fff;opacity:1;}
.banner .arrows{position:absolute;bottom:20px;right:20px;color:#fff;}
.banner .arrow{display:inline;padding-left:10px;cursor:pointer;}
</style>
</head>
<body>
<div class="banner">
<ul>
<li style="background-image: url('img/sunset.jpg');">
<div class="inner">
<h1>The jQuery slider that just slides.</h1>
<p>就是这个不到3kb的插件！没有奇特的特效或无用的标签。</p>
</li>
<li style="background-image: url('img/wood.jpg');">
<div class="inner">
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>使用幻灯片中的任何HTML，使用CSS扩展。 你有完全的控制权。</p>
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/unslider.min.js"></script>
<script>
if(window.chrome) {
$('.banner li').css('background-size', '100% 100%');
}
$('.banner').unslider({
arrows: true,
speed: 500, //为每张幻灯片设置动画的速度（以毫秒为单位）
delay: 3000, //幻灯片动画之间的延迟（以毫秒为单位）
complete: function() {}, //在每个幻灯片动画后调用的函数
keys: true, //启用键盘（左，右）箭头快捷方式
dots: true, //显示导航点
fluid: true //支持响应式设计,可能打破无响应的设计
});
</script>
</body>
</html>
