$(function () {  var _speed = 1000;  var _len = 0;  var _size = 150;  var _direction = 'left';  function mar(){    if(_direction == 'left'){      if(_len >= 450){       _direction = 'right';      }else{       $(".flow ul").animate({"margin-left":"-=" + _size + "px"});       _len += _size;      }    }else{      if(_len <= 0){       _direction = 'left';      }else{       $(".flow ul").animate({"margin-left":"+=" + _size + "px"});       _len -= _size;      }    }  }  var _go = setInterval(mar,_speed);  $("#pic_left").click(function (){   _direction = 'left';  });  $("#pic_right").click(function (){   _direction = 'right';  });  $(".flow li").mouseover(function (){    clearInterval(_go);  }).mouseout(function (){    _go = setInterval(mar,_speed);  });});

<div class="salebox">  <A class="left" id="pic_left">left</A>  <DIV class="pcont" id="ISL_Cont_1">    <DIV class="ScrCont">      <div class="flowbox" style="width:150px; height:60px; overflow:hidden;float:left;">        <div class="flow" style="width:150px;height:60px;">          <ul >           <li><img src="__PUBLIC__/images/demo/01.jpg" mce_src="__PUBLIC__/images/demo/01.jpg" width="150px" height="60px"></li>           <li><img src="__PUBLIC__/images/demo/02.jpg" mce_src="__PUBLIC__/images/demo/02.jpg" width="150px" height="60px"></li>           <li><img src="__PUBLIC__/images/demo/03.jpg" mce_src="__PUBLIC__/images/demo/03.jpg" width="150px" height="60px"></li>           <li><img src="__PUBLIC__/images/demo/04.jpg" mce_src="__PUBLIC__/images/demo/04.jpg" width="150px" height="60px"></li>          </ul>        </div>      </div>    </DIV>   </DIV>  <A class="right" id="pic_right">right</A></div>