点击左右箭头播放和自动轮播

html:

 <div class="cooperater clear-fix">
               <a href="javascript:void(0)" class="prev"></a>
               <div class="move">
                   <div>
                       <img src="images/L_cooperation.jpg" width="880" height="113" title="1"  />
                       <img src="images/2.jpg" width="880" height="113" title="2"/>
                       <img src="images/3.jpg" width="880" height="113" title="3"/>
                   </div>
               </div>
               <a href="javascript:void(0)" class="next"></a>
           </div>

js:

$(".prev").live('click',function(){
 
$(".L_cooperation .move div").stop();
$(".L_cooperation .move div").css("margin-left","-880px");
$(".L_cooperation .move div img").last().prependTo($(".L_cooperation .move div"));
$(".L_cooperation .move div").animate({marginLeft:0},1000);
clearTimeout(t1);
  })
$(".next").live('click',function(){
clearTimeout(t1);
$(".L_cooperation .move div").stop();
slide();  
 
})


function slide(){
$(".L_cooperation .move div").stop();
     $(".L_cooperation .move div").animate({marginLeft:"-880px"},1000,function(){
 $(".L_cooperation .move div").css("margin-left","0");
 $(".L_cooperation .move div img").first().appendTo($(".L_cooperation .move div"));  
})
 t1=setTimeout(slide,5000);
 }
 
 $(function(){ 
slide();
$(".prev").mouseout(function(){
    t1=setTimeout(slide,5000);  
})
})

大概思路：

点击prev的时候，显示上一张，向右滚动，因此要先定义-margin值和追加，在animate的时候，要将其margin值恢复到0；

点击next的时候，显示下一张。向左滚动，因此先animate，给-margin值，回调函数的时候，将其margin值恢复0；

自动轮播的时候，默认的情况下是像左滚动，和点击next的效果一样，因此将点击next里面的函数拿出来，放在一个函数slide()里面。然后用setTimeout设置一个定时器。在页面加载完了的时候，就执行slide();当鼠标点击上一个和下一个的时候，要清除这个定时器，而且停止一切正在进行的动画，要不然会出现乱滚的现象。在鼠标移出上一个的时候，再设置时间定时器，否则，就不会自动滚动。移出下一个的时候，则不需设定定时器，因为自动轮播的时候，本来就是按照显示下一张的顺序播放的。