Bootstrap插件--图片轮播

http://www.bootcss.com/p/unslider/

1.首先引入jQuery和Unslider的脚本：

<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.bootcss.com/p/unslider/unslider.min.js"></script>

2.准备HTML代码创建如下布局：

<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>

3.添加样式保证浮动定位准确：

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; height：200px;}
.banner ul li { float: left; }

4.添加事件：

<script type="text/javascript">
$(function() {
    $('.banner').unslider();
});</script>

给每个li添加背景图片属性

background-image: url(/img/xx.jpg); background-size: 100% 100%;

这样就可以用插件轻松实现图片轮播了~

源码请移步:https://github.com/idiot/unslider/blob/master/src/unslider.js