HTML代码CSS代码JS代码

<div class="slider" id="img"><ul class="sliderbox">
<li class="first"><a href=""><img src="images/ban1.gif" alt="HTML代码"/></a>
</li>
<li>
<a href=""><img src="images/ban2.gif" alt="css代码"/></a>
</li>
<li>
<a href=""><img src="images/ban3.gif" alt="HTML代码"/></a>
</li>
<li>
<a href=""><img src="images/ban4.gif" alt="HTML代码"/></a>
</li>
<li class="first">
<a href=""><img src="images/ban5.gif" alt="HTML代码"/></a>
</li>
<li>
<a href=""><img src="images/ban5.gif" alt="HTML代码"/></a>
</li>
<li>
<a href=""><img src="images/ban5.gif" alt="HTML代码"/></a>
</li>
<li>
<a href=""><img src="images/ban4.gif" alt="HTML代码"/></a>
</li>
</ul>
<ul class="slidernav"></ul> /*显示数字导航，非必须*/
<div class="prev">&lt;</div> /*显示上一页，非必须*/
<div class="next">&gt;</div> /*显示下一页，非必须*/
</div>

.slider{height:174px; margin:20px auto; overflow:hidden; position:relative;}
.sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/
.slidernav{position:absolute; right:0; bottom:0; width:100%; background: rgba(0,0,0,0.5); color:#fff; font-size:0; *word-spacing: -1px;}
.slidernav li{display: inline-block; *display: inline; *zoom:1; vertical-align: top; font-size:14px; margin-left: 10px; letter-spacing: normal; word-spacing: normal;}
.slidernav li a{width:16px; padding:2px 4px; height:12px; background:#fff; color:#000; text-align:center;}
.slidernav li.current a{background:#3B8DD1; color:#fff;}
@media screen and (-webkit-min-device-antio:0){
.slidernav{letter-spacing: -5px;}
}
.slider .prev, .slider .next{position: absolute; top:50%; margin-top:-30px; cursor: pointer; width:61px; height:61px; left:0; background: url(images/ft_icons.png) 0 0 no-repeat; text-indent:-9999px;}
.slider .next{right:0; left:auto; background-position: 0 -61px;}

$("#img").powerSlider({sliderNum:4});