峰之博纹 - Pelephone个人博客

不间断图片滚动js代码.真正兼容火狐ie

最近做一网站,要用到一下不间断的图片滚动效果,于是又百度了好半天。来来去去就是一个版本改一下下而已。都是一个粘贴一个,转来转去。
有些标题上面打着兼容ie 火狐,但是我火狐的firebug下面调试却出现一个X,提示不符合w3c标准。网站div少的时候运行虽然是没什么问题,但是嵌套多几个,图片就滚不起来了,到底什么原因我也不清楚,总之我改了下,总算是真正的兼容了。

下面是我改过的代码,加了兼容性判断,终于把问题解决。


 1 <div id="piclist" style="width:500px; overflow:hidden;">
2 <table>
3 <tr><td id="demo1" height="110">
4 <table height="110" border="0" cellpadding="0" cellspacing="5">
5 <tr>
6 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
7 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
8 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
9 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
10 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
11 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
12 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
13 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
14 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
15 <td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31"/></a></td>
16 </tr>
17 </table>
18 </td>
19 <td id="demo2">&nbsp;</td>
20 </tr></table>
21 <!-- end #piclist --></div>
22 <SCRIPT>
23 var speed3=25//速度数值越大速度越慢
24 var isIE = document.all && window.external; //判断是否非ie
25 if(isIE==false){
26 demo1 = document.getElementById("demo1"); //非w3c标准要找到表单,必须是要用getElementById("XX");
27 demo2 = document.getElementById("demo2");
28 piclist = document.getElementById("piclist");
29 }
30 /*
31 //这个星是用于判断是否火狐的,是多余代码,所以注释掉了,哪位有兴趣可以研究研究。
32 var firefox = document.getElementById && !document.all; //这段是为了兼容火狐,w3c标准
33 if(firefox==true){
34 demo1 = document.getElementById("demo1");
35 demo2 = document.getElementById("demo2");
36 piclist = document.getElementById("piclist");
37 }*/
38
39 demo2.innerHTML=demo1.innerHTML
40
41 function Marquee(){
42 if(demo2.offsetWidth-piclist.scrollLeft<=0)
43 piclist.scrollLeft-=demo1.offsetWidth
44 else{
45 piclist.scrollLeft++
46 }
47 }
48 var MyMar=setInterval(Marquee,speed3)
49 piclist.onmouseover=function() {clearInterval(MyMar)}
50 piclist.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
51 </SCRIPT>


posted @ 2008-10-16 12:26  Pelephone  阅读(363)  评论(0编辑  收藏  举报