自己整理了一个比较好的广告轮播的代码，很实用。
什么都不说，注释都写在代码里面了，易读，易懂。
代码
1 <script>
2 var dir=1;//每步移动像素，大＝快
3 var speed=10;//循环周期（毫秒）大＝慢
4 var MyMar=null;
5 function Marquee(){//正常移动
6 var demo = document.getElementById("demo");
7 var demo2 = document.getElementById("demo2");
8 if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0)
9 {
10 demo.scrollLeft=0;
11 }
12 if (dir<0 &&(demo.scrollLeft<=0))
13 {
14 demo.scrollLeft=demo2.offsetWidth;
15 }
16 demo.scrollLeft+=dir;
17 }
18 function onmouseoverMy()
19 {
20 window.clearInterval(MyMar);
21 }//暂停移动
22 function onmouseoutMy()
23 {
24 MyMar=setInterval(Marquee,speed);
25 }//继续移动
26 function r_left()
27 {
28 if (dir==-1)
29 dir=1;
30 }//换向左移
31 function r_right()
32 {
33 if (dir==1)
34 dir=-1;
35 }//换向右移
36
37 function IsIE()
38 {
39 var browser=navigator.appName
40 if ((browser=="Netscape"))
41 {
42 return false;
43 }
44 else if(browser=="Microsoft Internet Explorer")
45 {
46 return true;
47 }
48 else
49 {
50 return null;
51 }
52 }
53
54 var _IsIE = IsIE();
55 var _MousePX = 0;
56 var _MousePY = 0;
57 var _DivLeft = 0;
58 var _DivRight = 0;
59 var _AllDivWidth = 0;
60 var _AllDivHeight = 0;
61 function MoveDiv(e)
62 {
63 var obj = document.getElementById("demo");
64 _MousePX = _IsIE ? (document.body.scrollLeft + event.clientX) : e.pageX;
65 _MousePY = _IsIE ? (document.body.scrollTop + event.clientY) : e.pageY;
66 //Opera Browser Can Support ''window.event'' and ''e.pageX''
67 var obj1 = null;
68 if(obj.getBoundingClientRect)
69 {
70 //IE
71 obj1 = document.getElementById("demo").getBoundingClientRect();
72 _DivLeft = obj1.left;
73 _DivRight = obj1.right;
74 _AllDivWidth = _DivRight - _DivLeft;
75 }
76 else if(document.getBoxObjectFor)
77 {
78 //FireFox
79 obj1 = document.getBoxObjectFor(obj);
80 var borderwidth = (obj.style.borderLeftWidth != null && obj.style.borderLeftWidth != "") ? parseInt(obj.style.borderLeftWidth) : 0;
81 _DivLeft = parseInt(obj1.x) - parseInt(borderwidth);
82 _AllDivWidth = Cut_Px(obj.style.width);
83 _DivRight = _DivLeft + _AllDivWidth;
84 }
85 else
86 {
87 //Other Browser(Opera)
88 _DivLeft = obj.offsetLeft;
89 _AllDivWidth = Cut_Px(obj.style.width);
90 var parent = obj.offsetParent;
91 if(parent != obj)
92 {
93 while (parent) {
94 _DivLeft += parent.offsetLeft;
95 parent = parent.offsetParent;
96 }
97 }
98 _DivRight = _DivLeft + _AllDivWidth;
99 }
100
101 var pos1,pos2;
102 pos1 = parseInt(_AllDivWidth * 0.4) + _DivLeft;
103 pos2 = parseInt(_AllDivWidth * 0.6) + _DivLeft;
104
105 if(_MousePX > _DivLeft && _MousePX < _DivRight)
106 {
107 if(_MousePX > _DivLeft && _MousePX < pos1)//Move left
108 {
109 r_left();
110 }
111 else if(_MousePX < _DivRight && _MousePX > pos2)//Move right
112 {
113 r_right();
114 }
115
116 if(_MousePX > pos1 && _MousePX < pos2)//Stop
117 {
118 onmouseoverMy();
119 MyMar=null;
120 }else if(_MousePX < pos1 || _MousePX > pos2)
121 {
122 if(MyMar==null)
123 {
124 MyMar=setInterval(Marquee,speed);
125 }
126 }
127 }
128 }
129
130 function Cut_Px(cswidth)
131 {
132 cswidth = cswidth.toLowerCase();
133 if(cswidth.indexOf("px") != -1)
134 {
135 cswidth.replace("px","");
136 cswidth = parseInt(cswidth);
137 }
138 return cswidth;
139 }
140
141 function MoveOutDiv()
142 {
143 if(MyMar == null)
144 {
145 MyMar=setInterval(Marquee,speed);
146 }
147 }
148
149 </script>
下面是html的引用
代码
1 <div id="demo" onMouseMove="MoveDiv(event);" onMouseOut="MoveOutDiv();">
2 <div id="demo1" style="width:100%;">
3 <table cellspacing=0 cellpadding=0>
4 <tbody>
5 <tr valign=top>
6 <td valign=top nowrap>
7 <table>
8 <tr>
9 <td><a href="#"><img src="images/cp1.jpg" class="img"></a></td>
10 <td><a href="#"><img src="images/cp2.jpg" class="img"></a></td>
11 <td><a href="#"><img src="images/cp1.jpg" class="img"></a></td>
12 <td><a href="#"><img src="images/cp3.jpg" class="img"></a></td>
13 <td><a href="#"><img src="images/cp2.jpg" class="img"></a></td>
14 <td><a href="#"><img src="images/cp1.jpg" class="img"></a></td>
15 <td><a href="#"><img src="images/cp2.jpg" class="img"></a></td>
16 <td><a href="#"><img src="images/cp3.jpg" class="img"></a></td>
17 </tr>
18 </table>
19 </td>
20 <td width="0">
21 <div id="demo2" style="width:100%;"></div>
22 </td>
23 </tr>
24 </tbody>
25 </table>
26 </div>
27 </div>
这一段的js必须放在html的后面
1 <script type="text/javascript">
2 document.getElementById("demo2").innerHTML = document.getElementById("demo1").innerHTML;
3 MyMar=setInterval(Marquee,speed);
4 </script>
浙公网安备 33010602011771号