<!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>
<div class="vbox" style='overflow: hidden; height:500px; width:150px; color: #ff0000'>
<table align="left" cellpadding="0" cellspace="0" border="0">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="pic" >
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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">
(function ($) {
$.fn.runPic = function(options){
var defaults = { speed:10,picClass:"pic",c:0}
var opts = $.extend(defaults, options);
var css='.'+opts.picClass;
var ma = (opts.c != 1)?function(b){
var pic=$(css,b).get(0);
if(pic.offsetWidth-b.scrollLeft<=0)
b.scrollLeft-=pic.offsetWidth
else{
b.scrollLeft++
}
}:function(b){
var pic=$(css,b).get(0);
if(pic.offsetHeight-b.scrollTop<=0)
b.scrollTop-=pic.offsetHeight
else{
b.scrollTop++
}
}
this.each(function(){
var b=this;
var pic=$(css,b);pic.after(pic.clone());
var M=setInterval(function(){ma(b);},opts.speed);
$(b).mouseover(function() {
clearInterval(M)}).mouseout(function() {
M=setInterval(function(){ma(b);
}
,opts.speed
)});
});
};
})(jQuery);
$(function(){
$(".box").runPic({speed:18});//水平滚动
$(".vbox").runPic({speed:18,c:1});//纵向滚动
});
</script>
</body>
</html>
做的插件水平还是垂直方向都能滚动