* {
margin: 0
padding: 0
-webkit-font-smoothing: antialiased
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
}
有奇效，包你满意
直接用轮播插件
举一个最常见的轮播图例子，五张轮播图 + 圆点指示器 + 左右箭头。
<!-- 首先引入jQuery和unslider --><script src="jquery-1.11.1.min.js"></script>
<script src="unslider.min.js"></script>
<!-- 写点样式，让轮播好看点 -->
<style>
ul, ol { padding: 0}
.banner { position: relativeoverflow: autotext-align: center}
.banner li { list-style: none}
.banner ul li { float: left}
#b04 { width: 640px}
#b04 .dots { position: absoluteleft: 0right: 0bottom: 20px}
#b04 .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
}
#b04 .dots li.active
{
background: #fff
opacity: 1
}
#b04 .arrow { position: absolutetop: 200px}
#b04 #al { left: 15px}
#b04 #ar { right: 15px}
</style>
<!-- 把要轮播的地方写上来 --><div class="banner" id="b04">
<ul>
<li><img src="01.jpg" alt="" width="640" height="480" ></li>
<li><img src="02.jpg" alt="" width="640" height="480" ></li>
<li><img src="03.jpg" alt="" width="640" height="480" ></li>
<li><img src="04.jpg" alt="" width="640" height="480" ></li>
<li><img src="05.jpg" alt="" width="640" height="480" ></li>
</ul>
<a href="javascript:void(0)" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a>
<a href="javascript:void(0)" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a>
</div> <!-- 最后用js控制 -->
<script>
$(document).ready(function(e) {
var unslider04 = $('#b04').unslider({
dots: true
}),
data04 = unslider04.data('unslider')
$('.unslider-arrow04').click(function() {
var fn = this.className.split(' ')[1]
data04[fn]()
})
})
</script>
