张经纬的博客 -

var scrollWrapW,myScroll;
var rollDirection = 0; //0为左 1为右
var speed = 500;
function __scrollBox(){
 if (rollDirection == 0){
	 scrollWrapW = -($('ul li').eq(0).outerWidth(true) + $('ul li').eq(1).outerWidth(true)) + 'px';
	 $('ul').animate({left:scrollWrapW}, {
	   duration:200,
	   complete:function(){
		 $('ul').append($('ul li:first')).append($('ul li:first'));
		 $('ul').css("left","0");
		}
	  });
 }else{
	var last = $('ul li').length - 1;
	var last2 = $('ul li').length - 2;
	scrollWrapW = -($('ul li').eq(last).outerWidth(true) + $('ul li').eq(last2).outerWidth(true)) + 'px';
	$('ul').animate({left:0}, {
	   duration:200,
	   complete:function(){
		   $('ul').prepend($('ul li:last')).prepend($('ul li:last'));
		   $('ul').css("left",scrollWrapW);
		}
	  });
 }
}
 
$(document).ready(function(){
/* roll control */
myScroll = setInterval(__scrollBox,speed);
$('#scrool_wrap').hover(function(){
  clearInterval(myScroll);							 
},function(){
  myScroll = setInterval(__scrollBox,speed);	
});
/* left control */
$('.left').click(function(){
  rollDirection = 0;				  
});
$('.right').click(function(){
  rollDirection = 1;				  
});
})

* {
	margin:0;
	padding:0;
	border:0;
}
div {
	width:368px;
	overflow:hidden;
	position:relative;
	height:109px;
	margin:0 auto;
	background:#F00;
	border:5px solid #F00;
}
ul {
	height:109px;
	position:absolute;
	width:1000px;
}
li {
	float:left;
	position:relative;
	margin-right:5px;
}
span {
	cursor:pointer;
}

<span class="left">向左移动</span>&nbsp;<span class="right">向右边移动</span> <br />
<br />
<br />
<br />
<br />
<br />
<br />
<div>
  <ul id="scrool_wrap">
    <li><a href="#" target="_blank"><img src="img/01.jpg" width="184" height="109" /></a></li>
    <li><a href="#" target="_blank"><img src="img/02.jpg" width="184" height="109" /></a></li>
    <li><a href="#" target="_blank"><img src="img/03.jpg" width="184" height="109" /></a></li>
    <li><a href="#" target="_blank"><img src="img/04.jpg" width="184" height="109" /></a></li>
  </ul>
</div>