JavaScript實現圖片滾動的常見代碼，可以實現向上下左右四個方向的無縫滾動的效果，這是前端設計開發時常用的一個圖片特效，你可只用其中的一種滾動效果。JS實現圖片無間斷滾動代碼匯總
001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
002 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
003 <head>
004 <title>圖片滾動代碼合集</title>
005 <script type="text/javascript">
006 // 自動滾動
007 function boxmove(d1,d2,d3,e,obj){
008 var speed=30;
009 var demo=document.getElementById(d1);
010 var demo1=document.getElementById(d2);
011 var demo2=document.getElementById(d3);
012 demo2.innerHTML=demo1.innerHTML;
013 function boxTop(){
014 if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
015 else{demo.scrollTop++}
016 }
017 function boxRight(){
018 if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
019 else{demo.scrollLeft--}
020 }
021 function boxBottom(){
022 if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
023 else{demo.scrollTop--}
024 }
025 function boxLeft(){
026 if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
027 else{demo.scrollLeft++}
028 }
029 if(e==1){
030 var MoveTop=setInterval(boxTop,speed);
031 demo.onmouseover=function(){clearInterval(MoveTop);}
032 demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
033 }
034 if(e==2){
035 var MoveRight=setInterval(boxRight,speed);
036 demo.onmouseover=function(){clearInterval(MoveRight)}
037 demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
038 }
039 if(e==3){
040 var MoveBottom=setInterval(boxBottom,speed);
041 demo.onmouseover=function(){clearInterval(MoveBottom);}
042 demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
043 }
044 if(e==4){
045 var MoveLeft=setInterval(boxLeft,speed)
046 demo.onmouseover=function(){clearInterval(MoveLeft)}
047 demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
048 }
049 if(e=="top"){
050 MoveTop=setInterval(boxTop,speed)
051 obj.onmouseout=function(){clearInterval(MoveTop);}
052 }
053 if(e=="right"){
054 MoveRight=setInterval(boxRight,speed)
055 obj.onmouseout=function(){clearInterval(MoveRight);}
056 }
057 if(e=="bottom"){
058 MoveBottom=setInterval(boxBottom,speed)
059 obj.onmouseout=function(){clearInterval(MoveBottom);}
060 }
061 if(e=="left"){
062 MoveLeft=setInterval(boxLeft,speed)
063 obj.onmouseout=function(){clearInterval(MoveLeft);}
064 }
065 }
066 </script>
067 <style type="text/css">
068 div#a,div#b,div#c,div#d { float:left;}
069 h2 { clear:both; }
070 div#b,div#d,div#bb { white-space:nowrap; }
071 </style>
072 </head>
073 <body>
074 <h1>滾動合集</h1>
075 <hr />
076 <h2>向上</h2>
077 <div id="a" style="overflow:hidden;height:100px;width:90px;">
078 <div id="a1">
079 <img src="/images/logo.gif1" alt="" />
080 <img src="/images/logo.gif2" alt="" />
081 <img src="/images/logo.gif3" alt="" />
082 <img src="/images/logo.gif4" alt="" />
083 <img src="/images/logo.gif5" alt="" />
084 <img src="/images/logo.gif6" alt="" />
085 <img src="/images/logo.gif7" alt="" />
086 <img src="/images/logo.gif8" alt="" />
087 </div>
088 <div id="a2"></div>
089 </div>
090 <script type="text/javascript">
091 boxmove("a","a1","a2",1);
092 </script>
093 <h2>向右</h2>
094 <div id="b" style="overflow:hidden;height:100px;width:90px;">
095 <div id="b1">
096 <img src="/images/logo.gif1" alt="" />
097 <img src="/images/logo.gif2" alt="" />
098 <img src="/images/logo.gif3" alt="" />
099 <img src="/images/logo.gif4" alt="" />
100 <img src="/images/logo.gif5" alt="" />
101 <img src="/images/logo.gif6" alt="" />
102 <img src="/images/logo.gif7" alt="" />
103 <img src="/images/logo.gif8" alt="" />
104 </div>
105 <div id="b2"></div>
106 </div>
107 <script type="text/javascript">
108 boxmove("b","b1","b2",2);
109 </script>
110 <h2>向下</h2>
111 <div id="c" style="overflow:hidden;height:100px;width:90px;">
112 <div id="c1">
113 <img src="/images/logo.gif1" alt="" />
114 <img src="/images/logo.gif2" alt="" />
115 <img src="/images/logo.gif3" alt="" />
116 <img src="/images/logo.gif4" alt="" />
117 <img src="/images/logo.gif5" alt="" />
118 <img src="/images/logo.gif6" alt="" />
119 <img src="/images/logo.gif7" alt="" />
120 <img src="/images/logo.gif8" alt="" />
121 </div>
122 <div id="c2"></div>
123 </div>
124 <script type="text/javascript">
125 boxmove("c","c1","c2",3);
126 </script>
127 <h2>向左</h2>
128 <div id="d" style="overflow:hidden;height:100px;width:90px;">
129 <div id="d1">
130 <img src="/images/logo.gif1" alt="" />
131 <img src="/images/logo.gif2" alt="" />
132 <img src="/images/logo.gif3" alt="" />
133 <img src="/images/logo.gif4" alt="" />
134 <img src="/images/logo.gif5" alt="" />
135 <img src="/images/logo.gif6" alt="" />
136 <img src="/images/logo.gif7" alt="" />
137 <img src="/images/logo.gif8" alt="" />
138 </div>
139 <div id="d2"></div>
140 </div>
141 <script type="text/javascript">
142 boxmove("d","d1","d2",4);
143 </script>
144 <h2>手動滾動 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
145 <div id="aa" style="overflow:hidden;height:100px;width:90px;">
146 <div id="aa1">
147 <img src="/images/logo.gif1" alt="" />
148 <img src="/images/logo.gif2" alt="" />
149 <img src="/images/logo.gif3" alt="" />
150 <img src="/images/logo.gif4" alt="" />
151 <img src="/images/logo.gif5" alt="" />
152 <img src="/images/logo.gif6" alt="" />
153 <img src="/images/logo.gif7" alt="" />
154 <img src="/images/logo.gif8" alt="" />
155 </div>
156 <div id="aa2"></div>
157 </div>
158 <h2>手動滾動 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
159 <div id="bb" style="overflow:hidden;height:100px;width:90px;">
160 <div id="bb1">
161 <img src="/images/logo.gif1" alt="" />
162 <img src="/images/logo.gif2" alt="" />
163 <img src="/images/logo.gif3" alt="" />
164 <img src="/images/logo.gif4" alt="" />
165 <img src="/images/logo.gif5" alt="" />
166 <img src="/images/logo.gif6" alt="" />
167 <img src="/images/logo.gif7" alt="" />
168 <img src="/images/logo.gif8" alt="" />
169 </div>
170 <div id="bb2"></div>
171 </div>
172 </body>
173 </html>
