Js图片无缝滚动效果,喜欢的加个星吧,
关键的代码块:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<style type= "text/css" _ue_org_tagname= "style" ><!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 600 %; } #demo1 { float: left; } #demo2 { float: left; } --></style> <p> Js滚动特效大全<br /> </p> <div id= "demo" > <div id= "indemo" > <div id= "demo1" > <p> <a href= "#" ><img src= "/games/pic/0.jpg" border= "0" /></a> <a href= "#" ><img src= "/games/pic/0.jpg" border= "0" /></a> <a href= "#" ><img src= "/games/pic/0.jpg" border= "0" /></a> <a href= "#" ><img src= "/games/pic/0.jpg" border= "0" /></a> <a href= "#" ><img src= "/games/pic/0.jpg" border= "0" /></a> </p> </div> <div id= "demo2" > </div> </div> </div> <script _ue_org_tagname= "script" > <!-- var speed= 10 ; var tab=document.getElementById( "demo" ); var tab1=document.getElementById( "demo1" ); var tab2=document.getElementById( "demo2" ); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if (tab2.offsetWidth-tab.scrollLeft<= 0 ) tab.scrollLeft-=tab1.offsetWidth else { tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover= function () {clearInterval(MyMar)}; tab.onmouseout= function () {MyMar=setInterval(Marquee,speed)}; --> </script> |
原文:http://www.cnblogs.com/smartwangshuai/p/5314886.html