<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片批量滚动</title>
</head>
<body>
<div class="box" style='overflow:hidden;height:120px;width:700px;color:#ff0000'>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=pic01 class="pic" valign=top><table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><a href=http://www.fankelipinka.com target=_blank><img border=0 src="1.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明一</b>
</center></td>
<td width=30></td>
<td><a href=http://www.wangtx.com target=_blank><img border=0 src="2.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明二</b>
</center></td>
<td width=30></td>
<td><a href=http://www.yamaxun.org target=_blank><img border=0 src="3.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明三</b>
</center></td>
<td><a href=http://www.cnwenger.com target=_blank><img border=0 src="4.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明四</b>
</center></td>
<td width=30></td>
<td><a href=http://www.pc555.com target=_blank><img border=0 src="5.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明五</b>
</center></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class="box" style='overflow:hidden;height:120px;width:700px;color:#ff0000'>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=pic11 class="pic" valign=top><table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><a href=http://www.fankelipinka.com target=_blank><img border=0 src="5.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明一</b>
</center></td>
<td width=30></td>
<td><a href=http://www.wangtx.com target=_blank><img border=0 src="4.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明二</b>
</center></td>
<td width=30></td>
<td><a href=http://www.yamaxun.org target=_blank><img border=0 src="3.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明三</b>
</center></td>
<td><a href=http://www.cnwenger.com target=_blank><img border=0 src="2.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明四</b>
</center></td>
<td width=30></td>
<td><a href=http://www.pc555.com target=_blank><img border=0 src="1.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明五</b>
</center></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class="box" style='overflow:hidden;height:120px;width:700px;color:#ff0000'>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=pic21 class="pic" valign=top><table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><a href=http://www.fankelipinka.com target=_blank><img border=0 src="4.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明一</b>
</center></td>
<td width=30></td>
<td><a href=http://www.wangtx.com target=_blank><img border=0 src="5.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明二</b>
</center></td>
<td width=30></td>
<td><a href=http://www.yamaxun.org target=_blank><img border=0 src="2.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明三</b>
</center></td>
<td><a href=http://www.cnwenger.com target=_blank><img border=0 src="3.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明四</b>
</center></td>
<td width=30></td>
<td><a href=http://www.pc555.com target=_blank><img border=0 src="1.jpg" width=150 height=100 hspace=22></a><br>
<center>
<b>说明五</b>
</center></td>
</tr>
</table></td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript" src="jquery-1.6.js" ></script>
<script type="text/javascript" language="javascript" src="jQuery.runPic.js" ></script>
</body>
</html>
jQuery.runPic.js:
(function ($) {
$.fn.runPic = function(options){
var defaults = { speed:10,picClass:"pic",ma:function(b){
var pic=$('.'+this.picClass,b).get(0);
if(pic.offsetWidth-b.scrollLeft<=0)
b.scrollLeft-=pic.offsetWidth
else{
b.scrollLeft++
}
}
}
var opts = $.extend(defaults, options);
this.each(function(){
var b=this;
var pic=$('.'+opts.picClass,b);pic.after(pic.clone());
var M=setInterval(function(){opts.ma(b);},opts.speed);
$(b).mouseover(function() {clearInterval(M)}).mouseout(function() {M=setInterval(function(){opts.ma(b);},opts.speed)});
});
};
})(jQuery);
$(function(){
$(".box").runPic({speed:18});
});