jQuery 滚动图片

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>