多张图片自右向左循环滚动显示,当鼠标移动到图片上时图片停止滚动,当鼠标移到图片以外区域时,图片继续自右向左循环滚动。每张图上都可添加链接引向不同位置的帖子。
代码:
这段代码不是原创,而是我从其他网页上截取的代码片断,根据自己需要做了修改,并且添加了注释。
绿色部分是注释,蓝色部分是Javascript代码,其余是html代码。
拷贝代码使用时,绿色注释部分需删除,否则影响代码效果。因为搜狐论坛不能完整显示网页代码,因此我用中文尖括号<>替代英文尖括号,以便代码可以正常显示。拷贝代码使用时,所有尖括号<请替换成<,所有尖括号>请替换成>。
//定义图片滚动区域宽度,具体宽度913可根据需要更改,但要保证所有小图片宽度之和大于滚动区域宽度。
//注意id=scrollpic这部分不要更改,会被下面的JavaScript代码用到
<div id=scrollpic style=overflow: hidden; width:913px;>
<table cellspacing=0 cellpadding=0 align=center border=0>
<tr>
//注意id=scrollpic1这部分不要更改,会被下面的JavaScript代码用到
<td id=scrollpic1>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<tr>
//定义图1地址,图1的具体图片地址可根据需要更改
//例:src=图1地址
<td width=185 ><img src=http://image1.club.sohu.com/pic/02/06/hxzy38a37ad660911a22.jpg /></td>
//定义图2地址,图2的具体图片地址可根据需要更改
//例:src=图2地址
<td width=185 ><img src=http://image1.club.sohu.com/pic/df/2e/hxzycd25c5d21ec914fa.jpg /></td>
//定义图3-图10地址,图3-图10的具体图片地址可根据需要分别更改
//例:src=图3地址
<td width=185 ><img src=http://image1.club.sohu.com/pic/86/7c/hxzy1d6b9dbd31037dd7.jpg /></td>
<td width=185 ><img src=http://image1.club.sohu.com/pic/e4/87/hxzy8a23effe3f101f4b.jpg /></td>
<td width=185 ><img src=http://image1.club.sohu.com/pic/e5/f8/hxzy3c238da78778cd67.jpg /></td>
<td width=185 ><img src=http://image1.club.sohu.com/pic/74/78/hxzya257d79c0c8f5635.jpg /></td>
<td width=185 ><img src=http://image1.club.sohu.com/pic/95/09/hxzy89a7cc1d2f4444ea.jpg /></td>
<td width=185 ><img src=http://image1.club.sohu.com/pic/63/64/hxzy9644fc02748b3064.jpg /></td>
<td width=185 ><img src=http://image1.club.sohu.com/pic/54/7c/hxzy62056924145d076f.jpg /></td>
<td width=185 ><img src=http://image1.club.sohu.com/pic/b0/bc/hxzy3530eaebb527a0b8.jpg /></td>
</tr>
</table>
</td>
//注意id=scrollpic2这部分不要更改,会被下面的JavaScript代码用到
<td id=scrollpic2></td>
</tr>
</table>
</div>
<script type=text/javascript>
//定义图片滚动速度,具体速度15可根据需要更改
var speed=15;
//定义图片滚动方向,自右向左水平滚动,无需修改,直接拷贝即可
scrollpic2.innerHTML=scrollpic1.innerHTML;
function Marquee()
{
if(scrollpic2.offsetWidth-scrollpic.scrollLeft<=0)
scrollpic.scrollLeft-=scrollpic1.offsetWidth;
else
scrollpic.scrollLeft++;
}
var MyMar=setInterval(Marquee,speed);
scrollpic.onmouseover=function() {clearInterval(MyMar);}
scrollpic.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
</script>
来源:http://club.yule.sohu.com/read_elite.php?b=bjbzk&a=5638944