HTML代码CSS代码JS代码

<div class="slider" id="img">
<ul class="sliderbox">
<li class="first">
<div class="item-img"><a href=""><img src="images/ban1.gif" alt="HTML代码"/></a></div>
<div class="item-content">
<h3><a href="">我是一个标题测试1</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, magnam recusandae provident perspiciatis </p>
</div>
</li>
<li>
<div class="item-img"><a href=""><img src="images/ban2.gif" alt="HTML代码"/></a></div>
<div class="item-content">
<h3><a href="">我是一个标题测试2</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, magnam recusandae provident perspiciatis </p>
</div>
</li>
<li>
<div class="item-img"><a href=""><img src="images/ban3.gif" alt="HTML代码"/></a></div>
<div class="item-content">
<h3><a href="">我是一个标题测试3</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, magnam recusandae provident perspiciatis </p>
</div>
</li>
<li>
<div class="item-img"><a href=""><img src="images/ban4.gif" alt="HTML代码"/></a></div>
<div class="item-content">
<h3><a href="">我是一个标题测试4</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, magnam recusandae provident perspiciatis </p>
</div>
</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; width:400px;}
.sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/
.sliderbox li{ text-align: center; width:400px; overflow: hidden;}
.sliderbox .item-img{float:left; margin-right:10px;}
.sliderbox .item-content{margin-left:194px; margin-top:10px; text-align: left;}
.slidernav{position:absolute; right:0; bottom:0; background: rgba(0,0,0,0.5); 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();