左右按钮轮播代码

</pre><p>html 片段</p><p></p><pre name="code" class="html"> <div class="pd-carousel">

<div class="pd-carousel-inner" id="photo">
<ul class="photoul" id="photoul">
<li><img src="images/pd1.jpg" alt=""></li>
<li><img src="images/pd1.jpg" alt=""></li>
<li><img src="images/pd1.jpg" alt=""></li>
</ul>
</div>

<div class="btnla">
<img src="images/leftarrow.png" alt="">
</div>

<div class="btnra">
<img src="images/rightarrow.png" alt="">
</div>

</div>

css 片段：

.pd-carousel{position:relative;width:780px; height:300px; border:1px solid #f0f0f0;overflow:hidden;}.pd-carousel-inner{position:absolute;top:35px;left:80px;width:620px; height:230px;overflow:hidden;}.pd-carousel-inner ul{width:2000%;height:230px;position:absolute;top:15; left:0;}.pd-carousel-inner ul li{float:left;width:200px;height:230px;padding-right: 6.3px;}.pd-carousel-inner ul li img{float:left;display:block;width:200px; height:230px;margin:0 auto;}.btnla{position: absolute;top:125px;left:15px;}.btnla img{width:50px;height:50px;}.btnra{position: absolute;top:125px;right:15px;}.btnra img{width:50px;height:50px;}

JS片段：

<script type="text/javascript">
var _index=0;
$(".btnra img").click(function(){
_index++;
var len=$(".pd-carousel-inner ul li").length;
if(_index+5>len)
{
$(".pd-carousel-inner ul").stop().append($(".pd-carousel-inner ul").html());
}

$(".pd-carousel-inner ul").stop().animate({left:-_index*620},3000);

});

$(".btnla img").click(function(){
if(_index==0){
$(".pd-carousel-inner ul").prepend($(".pd-carousel-inner ul").html());

$(".pd-carousel-inner ul").css("left","-1240px");
_index=6
}
_index--;
$(".pd-carousel-inner ul").stop().animate({left:-_index*620},3000);
});
</script>