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

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();当鼠标点击上一个和下一个的时候，要清除这个定时器，而且停止一切正在进行的动画，要不然会出现乱滚的现象。在鼠标移出上一个的时候，再设置时间定时器，否则，就不会自动滚动。移出下一个的时候，则不需设定定时器，因为自动轮播的时候，本来就是按照显示下一张的顺序播放的。