经常有人问怎么在HTML上制作图片的无缝滚动，我自己在一些项目中也会经常用到的，今天花了些时间，上网搜索了一下，下了些源码回来看了一下，发现都是只能在IE下能够滚动的，而且都是光<html></html>这样子的，没有加上documentType标签，不符合“标准”。
于是自己套上了标准之后再改了一下，发现在firefox中还是滚动不起来，知道肯定是某些地方的js只适用于IE吧，也懒得慢慢找了，直接用jquery来制作。
图片无缝向左滚动的代码如下：
<!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" c /> <title>JS图片向左滚动</title> <style type="text/css"> img{ border: none; } </style> <!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 --> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="demo" style="overflow:hidden;width:500px;"> <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr> <td id="demo1" valign="top" bgcolor="ffffff"> <!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ --> <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td> <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td> <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td> <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td> <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td> </tr> </table> </td> <td id="demo2" valign="top"></td> </tr> </table> </div> <script type="text/javascript"> var speed=30; var demo = $("#demo"); var demo1 = $("#demo1"); var demo2 = $("#demo2"); demo2.html(demo1.html()); function Marquee(){ if(demo.scrollLeft()>=demo1.width()) demo.scrollLeft(0); else{ demo.scrollLeft(demo.scrollLeft()+1); } } var MyMar=setInterval(Marquee,speed) demo.mouseover(function() { clearInterval(MyMar); } ) demo.mouseout(function() { MyMar=setInterval(Marquee,speed); } ) function fun1(){ alert(demo.scrollLeft()); } function fun2(){ alert(demo1.width()); } </script> <input type="button" value="显示demo.scrollLeft()" /> <input type="button" value="显示demo1.width())" /> </body> </html>
那二个按钮主要是为了自己观察值的变化之用，正式使用中可以去掉。
向右无缝滚动的HTML同上，只是js脚本中的Marquee函数不同，代码如下：
function Marquee(){
if(demo.scrollLeft()==0){
demo.scrollLeft(demo1.width());
}else{
demo.scrollLeft(demo.scrollLeft()-1);
}
}
向上无缝滚动的HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd飞飞As，p技术乐园"> <html xmlns=" http://www.w3.org/1999/xhtml飞飞Asp技术乐园"> <head> <meta http-equiv="Content-Type" c /> <title>JS图片向上滚动</title> <style type="text/css"> img{ border: none; } </style> <!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 --> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="demo" style="overflow:hidden;height:300px;"> <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr id="demo1"> <td valign="top" bgcolor="ffffff"> <!-- 特别注意，下面的图片总高度必须大于上面定义的demo的宽度，如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题！ --> <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td> </tr> <tr align="center"> <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td> </tr> <tr align="center"> <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td> </tr> <tr align="center"> <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td> </tr> <tr align="center"> <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td> </tr> </table> </td> </tr> <tr id="demo2"> </tr> </table> </div> <script type="text/javascript"> var speed=30; var demo = $("#demo"); var demo1 = $("#demo1"); var demo2 = $("#demo2"); demo2.html(demo1.html()); function Marquee(){ if(demo.scrollTop()>=demo1.height()) demo.scrollTop(0); else{ demo.scrollTop(demo.scrollTop()+1); } } var MyMar=setInterval(Marquee,speed) demo.mouseover(function() { clearInterval(MyMar); } ) demo.mouseout(function() { MyMar=setInterval(Marquee,speed); } ) function fun1(){ alert(demo.scrollTop()); } function fun2(){ alert(demo1.height()); } </script> <input type="button" value="显示demo.scrollTop()" /> <input type="button" value="显示demo1.height())" /> </body> </html>
向下无缝滚动的HTML代码同上，只是js脚本中的Marquee函数不同，如下：
function Marquee(){
if(demo.scrollTop()==0)
demo.scrollTop(demo1.height());
else{
demo.scrollTop(demo.scrollTop()-1);
}
}
|
