/*css*/
.imgBox{height:100px;position:relative;overflow:hidden;}
.imgBox ul{position:absolute;width:9000px;}
.imgBox li{float:left;width:60px;height:60px;background:#CCC;border:1px solid #000;margin-right:20px;overflow:hidden;}
/*jq*/
var imgRun = function(a,b,c,d){
var $imgUl = $(a).find("ul");
var $imgLi = $(a).find("li");
var $width = $(a).find("li").eq(0).outerWidth(true);
var $s = 0;
var $timer1 = null;
var speed1 = parseInt(d);
var speed2 = parseInt(d/5);
$imgLi.clone(true).appendTo($imgUl);
function runLe(){
$s--;
if($s<-$width){
$s=0;
$(a).find("li:first").appendTo($imgUl);
}
$imgUl.css("left",$s+"px");
}
function runRi(){
$s++;
if($s>0){
$s=-$width;
$(a).find("li:last").prependTo($imgUl);
}
$imgUl.css("left",$s+"px");
}
$timer1 = setInterval(runLe,speed1);
$imgUl.hover(function(){
clearInterval($timer1);
},function(){
$timer1 = setInterval(runLe,speed1);
})
$(b).mousedown(function(){
clearInterval($timer1);
$timer1 = setInterval(runRi,speed2);
})
$(b).mouseup(function(){
clearInterval($timer1);
$timer1 = setInterval(runLe,speed1);
})
$(c).mousedown(function(){
clearInterval($timer1);
$timer1 = setInterval(runLe,speed2);
})
$(c).mouseup(function(){
clearInterval($timer1);
$timer1 = setInterval(runLe,speed1);
})
}
imgRun("#imgRun","#imgRunLe","#imgRunRi",30);
/*html*/
<div class="imgBox" id="imgRun">
<ul>
<li><img src="../images/i01.jpg" width="60" height="60"/></li>
<li><img src="../images/i02.jpg" width="60" height="60"/></li>
<li><img src="../images/i03.jpg" width="60" height="60"/></li>
<li><img src="../images/i04.jpg" width="60" height="60"/></li>
<li><img src="../images/i05.jpg" width="60" height="60"/></li>
</ul>
</div>
<a id="imgRunLe">left</a> <a id="imgRunRi">right</a>
