图片无间断滚动JS实现代码

1. <!--//向左滚动代码开始-->
2. <style type="text/css">
3. body{margin:0px auto; padding:0px;}
4. ul,li{margin:0px; padding:0px;list-style:none;}
5. .sqBorder {width:602px; height:31px; padding:1px; border:0px #000000 solid; background:#555555;}
6. .scroll_div {width:600px; height:31px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
7. .scroll_div img {width:88px;height:31px;border: 0;margin: auto 8px; border:1px #efefef solid;}
8. #scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/*设置ul和li横排*/
9. </style>
10. <script language="javascript">
11. function ScrollImgLeft(){
12. var speed=20
13. var scroll_begin = document.getElementById("scroll_begin");
14. var scroll_end = document.getElementById("scroll_end");
15. var scroll_div = document.getElementById("scroll_div");
16. scroll_end.innerHTML=scroll_begin.innerHTML
17.      function Marquee(){
18.        if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
19.          scroll_div.scrollLeft-=scroll_begin.offsetWidth
20.        else
21.          scroll_div.scrollLeft++
22.      }
23. var MyMar=setInterval(Marquee,speed)
24.      scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
25.      scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
26. }
27. </script>
28. <h2 align="center">向左滚动</h2>
29. <div style="text-align:center">
30.      <div class="sqBorder">
31.      <!--#####滚动区域#####-->
32.        <div id="scroll_div" class="scroll_div">
33.          <div id="scroll_begin">
34.            <ul>
35.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233030705.gif" alt="『皇朝DJ联盟』" /></a></li>
36.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233030705.gif" alt="『皇朝DJ联盟』" /></a></li>
37.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
38.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
39.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
40.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
41.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
42.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
43.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
44.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
45.            </ul>
46.          </div>
47.          <div id="scroll_end"></div>
48.        </div>
49.      <!--#####滚动区域#####-->
50.      </div>
51.      <script type="text/javascript">ScrollImgLeft();</script>
52. </div>
53. <!--//向左滚动代码结束-->
55. **********************************************************************************************************
57. 向上滚动
61. <!--//向上滚动代码开始-->
62. <style type="text/css">
63. body{margin:0px auto; padding:0px;}
64. ul,li{margin:0px; padding:0px;list-style:none;}
66. .sqBorder {width:80; height:182px; padding:1px; border:0x #000000 solid; background:#555555;}
67. .scroll_div {width:80; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
68. .scroll_div img {width:80;height:31;border:0;margin: 1px auto; border:0px #efefef solid;}
69. </style>
70. <script language="javascript">
71. function ScrollImgTop(){
72. var speed=20
73. var scroll_begin = document.getElementById("scroll_begin");
74. var scroll_end = document.getElementById("scroll_end");
75. var scroll_div = document.getElementById("scroll_div");
76. scroll_end.innerHTML=scroll_begin.innerHTML
77.     function Marquee(){
78.       if(scroll_end.offsetTop-scroll_div.scrollTop<=0)
79.         scroll_div.scrollTop-=scroll_begin.offsetHeight
80.       else
81.         scroll_div.scrollTop++
82.     }
83. var MyMar=setInterval(Marquee,speed)
84.     scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
85.     scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
86. }
88. </script>
89. <h2 align="center">向上滚动</h2>
90. <div style="text-align:center">
91.     <div class="sqBorder">
92.     <!--#####滚动区域#####-->
93.       <div id="scroll_div" class="scroll_div">
94.         <div id="scroll_begin">
95.           <ul>
96. <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233030705.gif" alt="『皇朝DJ联盟』" /></a></li>
97.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233030705.gif" alt="『皇朝DJ联盟』" /></a></li>
98.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
99.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
100.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
101.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
102.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
103.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
104.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『皇朝DJ联盟』" /></a></li>
105.              <li><a href="http://www.huangchao.net/"><img src="/Article/UploadFiles/200803/20080311233052332.gif" alt="『www.huangchao.net』" /></a></li>
107.           </ul>
108.         </div>
109.         <div id="scroll_end"></div>
110.       </div>
111.     <!--#####滚动区域#####-->
112.     </div>
113.     <script type="text/javascript">ScrollImgTop();</script>
114. </div>
115. <!--//向上滚动代码结束-->
117. ********************************************************************************************************
118. 文本向上滚动
120. <!---滚动开始--><div id="demo" style="overflow:hidden;height:100px;width:230px; font-size:12px; line-height:20px;overflow:hidden;float:left">
121. <div id=demo1>
122. 皇朝DJ联盟 www.huangchao.net <br />
123. 皇朝DJ联盟 www.huangchao.net <br />
124. 皇朝DJ联盟 www.huangchao.net <br />
125. 皇朝DJ联盟 www.huangchao.net <br />
126. 皇朝DJ联盟 www.huangchao.net <br />
127. 皇朝DJ联盟 www.huangchao.net <br />
128. 皇朝DJ联盟 www.huangchao.net <br />
129. 皇朝DJ联盟 www.huangchao.net <br />
130. 皇朝DJ联盟 www.huangchao.net 
131. </div>
132. <div id=demo2></div>
133. </div>
134. <script>
135. var speed=40
136. var demo=document.getElementById("demo");
137. var demo2=document.getElementById("demo2");
138. var demo1=document.getElementById("demo1");
139. demo2.innerHTML=demo1.innerHTML
140. function Marquee(){
141. if(demo2.offsetTop-demo.scrollTop<=0)
142. demo.scrollTop-=demo1.offsetHeight
143. else{
144. demo.scrollTop++
145. }
146. }
147. var MyMar=setInterval(Marquee,speed)
148. demo.οnmοuseοver=function() {clearInterval(MyMar)}
149. demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
150. </script>
151. <!---滚动结束-->