unslider.js是一款轻量的轮播插件,下载地址unslider.js
.banner{height: 490px; position: relative; overflow: auto; }
.banner ul li{width:100%; float: left; }
.banner ul li img{width: 100%;}
.banner ol{position: absolute; bottom:50px; left: 45%;}
.banner ol 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;}
.banner ol .active{background: #fff}
<div class="banner width100">
<ul>
<li><a href=""><img src="images/lj.jpg" /></a></li>
<li><a href=""><img src="images/lyq.jpg" /></a></li>
<li><a href=""><img src="images/xyj_23.jpg" /></a></li>
<li><a href=""><img src="images/11-23.jpg" /></a></li>
</ul>
</div>
<script src="//unslider.com/unslider.js"></script>
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500,
delay: 3000,
autoplay: true,
dots: true,
});
});
</script>