Bootstrap插件-图片轮播
Bootstrap插件--图片轮播
http://www.bootcss.com/p/unslider/
1.首先引入jQuery和Unslider的脚本:
2.准备HTML代码创建如下布局:
3.添加样式保证浮动定位准确:
4.添加事件:
给每个li添加背景图片属性
源码请移步:https://github.com/idiot/unslider/blob/master/src/unslider.js
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