HTML代码CSS代码JS代码

<div class="slider" id="img">
<ul class="sliderbox">
<li class="first">
<div><a href=""><img src="images/ban1.gif" alt="HTML代码"/></a></div>
<h3>我是一个标题测试</h3>
</li>
<li class="first">
<div><a href=""><img src="images/ban1.gif" alt="HTML代码"/></a></div>
<h3>我是一个标题测试</h3>
</li>
<li class="first">
<div><a href=""><img src="images/ban1.gif" alt="HTML代码"/></a></div>
<h3>我是一个标题测试</h3>
</li>
<li class="first">
<div><a href=""><img src="images/ban1.gif" alt="HTML代码"/></a></div>
<h3>我是一个标题测试</h3>
</li>
<li class="first">
<div><a href=""><img src="images/ban1.gif" alt="HTML代码"/></a></div>
<h3>我是一个标题测试</h3>
</li>
<li class="first">
<div><a href=""><img src="images/ban1.gif" alt="HTML代码"/></a></div>
<h3>我是一个标题测试</h3>
</li>
</ul>
<ul class="slidernav"></ul>
<div class="prev">&lt;</div>
<div class="next">&gt;</div>
</div>

.slider{height:198px; margin:20px auto; overflow:hidden; position:relative; width:174px;}
.sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/
.sliderbox li{text-align: center; width:174px;}
.slidernav{position:absolute; right:20px; top:0; width:100%; color:#fff; font-size:0; *word-spacing: -1px; text-align: right;}
.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();