无缝滚动图

 

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8" />
  5     <title>Document</title>
  6 </head>
  7 <body>
  8 
  9 <div id="colee" style="overflow:hidden;height:253px;width:410px;">
 10 <div id="colee1">
 11 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 12 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 13 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 14 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 15 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 16 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 17 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 18 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 19 </div>
 20 <div id="colee2"></div>
 21 </div>
 22 <script>
 23 var speed=30;
 24 var colee2=document.getElementById("colee2");
 25 var colee1=document.getElementById("colee1");
 26 var colee=document.getElementById("colee");
 27 colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
 28 function Marquee1(){
 29 //当滚动至colee1与colee2交界时
 30 if(colee2.offsetTop-colee.scrollTop<=0){ //在这个点之后，如果不做处理的话，colee2.offsetTop会越来越小，colee.scrollTop会越来越大
 31 colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
 32 }else{
 33 colee.scrollTop++  //数字，可以自增
 34 }
 35 }
 36 var MyMar1=setInterval(Marquee1,speed)//设置定时器
 37 //鼠标移上时清除定时器达到滚动停止的目的
 38 colee.onmouseover=function() {clearInterval(MyMar1)}
 39 //鼠标移开时重设定时器
 40 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
 41 </script>
 42 <!--向上滚动代码结束-->
 43 
 44 
 45 
 46 
 47 <br>
 48 <!--下面是向下滚动代码-->
 49 <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;">
 50 <div id="colee_bottom1">
 51 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 52 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 53 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 54 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 55 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 56 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 57 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 58 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 59 <p><img src="http://js.alixixi.com/img/201108/1.jpg"></p>
 60 </div>
 61 <div id="colee_bottom2"></div>
 62 </div>
 63 <script>
 64 var speed=30
 65 var colee_bottom2=document.getElementById("colee_bottom2");
 66 var colee_bottom1=document.getElementById("colee_bottom1");
 67 var colee_bottom=document.getElementById("colee_bottom");
 68 colee_bottom2.innerHTML=colee_bottom1.innerHTML
 69 colee_bottom.scrollTop=colee_bottom.scrollHeight
 70 function Marquee2(){
 71 if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)
 72 colee_bottom.scrollTop+=colee_bottom2.offsetHeight
 73 else{
 74 colee_bottom.scrollTop--
 75 }
 76 }
 77 var MyMar2=setInterval(Marquee2,speed)
 78 colee_bottom.onmouseover=function() {clearInterval(MyMar2)}
 79 colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
 80 </script>
 81 <!--向下滚动代码结束-->
 82 <br>
 83 <!--下面是向左滚动代码-->
 84 <div id="colee_left" style="overflow:hidden;width:500px;">
 85 <table cellpadding="0" cellspacing="0" border="0">
 86 <tr><td id="colee_left1" valign="top" align="center">
 87 <table cellpadding="2" cellspacing="0" border="0">
 88 <tr align="center">
 89 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
 90 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
 91 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
 92 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
 93 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
 94 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
 95 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
 96 </tr>
 97 </table>
 98 </td>
 99 <td id="colee_left2" valign="top"></td>
100 </tr>
101 </table>
102 </div>
103 <script>
104 //使用div时，请保证colee_left2与colee_left1是在同一行上.
105 var speed=30//速度数值越大速度越慢
106 var colee_left2=document.getElementById("colee_left2");
107 var colee_left1=document.getElementById("colee_left1");
108 var colee_left=document.getElementById("colee_left");
109 colee_left2.innerHTML=colee_left1.innerHTML
110 function Marquee3(){
111 if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度
112 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
113 else{
114 colee_left.scrollLeft++
115 }
116 }
117 var MyMar3=setInterval(Marquee3,speed)
118 colee_left.onmouseover=function() {clearInterval(MyMar3)}
119 colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
120 </script>
121 <!--向左滚动代码结束-->
122 <br>
123 <!--下面是向右滚动代码-->
124 <div id="colee_right" style="overflow:hidden;width:500px;">
125 <table cellpadding="0" cellspacing="0" border="0">
126 <tr><td id="colee_right1" valign="top" align="center">
127 <table cellpadding="2" cellspacing="0" border="0">
128 <tr align="center">
129 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
130 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
131 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
132 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
133 <td><p><img src="http://js.alixixi.com/img/201108/1.jpg"></p></td>
134 </tr>
135 </table>
136 </td>
137 <td id="colee_right2" valign="top"></td>
138 </tr>
139 </table>
140 </div>
141 <script>
142 var speed=30//速度数值越大速度越慢
143 var colee_right2=document.getElementById("colee_right2");
144 var colee_right1=document.getElementById("colee_right1");
145 var colee_right=document.getElementById("colee_right");
146 colee_right2.innerHTML=colee_right1.innerHTML
147 function Marquee4(){
148 if(colee_right.scrollLeft<=0)
149 colee_right.scrollLeft+=colee_right2.offsetWidth
150 else{
151 colee_right.scrollLeft--
152 }
153 }
154 var MyMar4=setInterval(Marquee4,speed)
155 colee_right.onmouseover=function() {clearInterval(MyMar4)}
156 colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}
157 </script>
158 <!--向右滚动代码结束-->
159 </body>
160 </html>

 

posted @ 2016-09-24 06:42  nostic  阅读(163)  评论(0)    收藏  举报