jQuery轮播图

html部分：

 <div class="div1">
 <ul class="ul1">
     <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
        <li>4444444444</li>
        <li>5555555555</li>
    </ul>
</div>
<div>
 <input id="btn1" type="button" value="←">
 <input id="btn2" type="button" value="→">
</div>

css部分（随便写的）：

 * { margin:0; padding:0;}
body { text-align:center;}
.div1 { overflow:hidden; width:350px; height:160px; margin:0 auto; border:3px solid #f00; position:relative;}
.ul1 { position:absolute; left:0; top:0;}
.ul1 li { width:100px; height:150px; float:left; list-style:none;}

js部分：

 $(function(){
 //复制ul里面的li
 $('.ul1 li').clone().appendTo('.ul1');
 
 var iNum = 0;
 var liWidth = $('.ul1 li').width();
 var liLength = $('.ul1 li').length;
 var timer = null;
 
 $('.ul1').width(liWidth*liLength);
 
 $('#btn1').click(function(){
  clearInterval(timer);
  if(iNum==liLength/2){
   iNum = 0;
   $('.ul1').stop(true,true).css('left','0');
  };
  iNum++;
  $('.ul1').stop(true,true).animate({left:-iNum*liWidth},function(){autoMove()});
 });
 
 $('#btn2').click(function(){
  clearInterval(timer);
  if(iNum==0){
   iNum = liLength/2;
   $('.ul1').stop(true,true).css('left',-iNum*liWidth);
  }
  iNum--;
  $('.ul1').stop(true,true).animate({left:-iNum*liWidth},function(){autoMove()});
 });
 
 //自动轮播
 function autoMove(){
  timer = setInterval(function(){
   if(iNum==liLength/2){
    iNum = 0;
    $('.ul1').css('left','0');
   };
   iNum++;
   $('.ul1').animate({left:-iNum*liWidth});
  },3000);
 }
 autoMove();
 
});