左右按鈕輪播代碼

</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>