首页 > css技术> 详细内容
css技术
 
 
css技术 > 正文
图片连续循环滚动代码
日期:2018-02-16 

[图片] 向左续循环滚动

<div id=demo style="OVERFLOW: hidden; width: 632px; COLOR: #ffffff;height:150">
       <table cellSpacing="0" cellPadding="0 "align="left" border="0" cellspace="0">
         <tr>
           <td id=demo1 valign=top>
           <table width="632px" height="150px" border="0" cellpadding="0" cellspacing="10">
             <tr>
               <td width="114"><a href="http://www.cnblogs.com/flash/s1.swf" style="border:none" ><img src="/uploadfile/20110415160642416.gif" border="0" /></a></td>
               <td width="114"><a href="http://www.cnblogs.com/flash/s2.swf" style="border:none" ><img src="/uploadfile/20110415160643416.gif" border="0" /></a></td>
               <td width="114"><a href="http://www.cnblogs.com/flash/s3.swf" style="border:none" ><img src="/uploadfile/20110415160643322.gif" border="0" /></a></td>
               <td width="114"><a href="http://www.cnblogs.com/flash/s4.swf" style="border:none"><img src="/uploadfile/20110415160643792.gif" border="0"/></a></td>
               <td width="114"><a href="http://www.cnblogs.com/flash/s5.swf" style="border:none" ><img src="/uploadfile/20110415160644694.gif" border="0" /></a></td>
             </tr>
           </table></td>
           <td id=demo2 valign="top">&nbsp;</td></tr>
           <tr>
           <td><SCRIPT language="javascript">
 var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
 function Marquee(){
 if(demo2.offsetWidth-demo.scrollLeft<=0)
 demo.scrollLeft-=demo1.offsetWidth
 else{
 demo.scrollLeft++
 }
 }
 var MyMar=setInterval(Marquee,speed3)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
 </SCRIPT>
           </td>
           </tr>
           </table>

</div>

[图片]向右续循环滚动

<div id=demo style="OVERFLOW: hidden; width: 632px; COLOR: #ffffff;height:150">
       <table cellSpacing="0" cellPadding="0 "align="left" border="0" cellspace="0">
         <tr>
           <td id=demo1 valign=top>
           <table width="632px" height="150px" border="0" cellpadding="0" cellspacing="10">
             <tr>
               <td width="114"><a href="http://www.cnblogs.com/flash/s1.swf" style="border:none" ><img src="/uploadfile/20110415160642416.gif" border="0" /></a></td>
               <td width="114"><a href="http://www.cnblogs.com/flash/s2.swf" style="border:none" ><img src="/uploadfile/20110415160643416.gif" border="0" /></a></td>
               <td width="114"><a href="http://www.cnblogs.com/flash/s3.swf" style="border:none" ><img src="/uploadfile/20110415160643322.gif" border="0" /></a></td>
               <td width="114"><a href="http://www.cnblogs.com/flash/s4.swf" style="border:none"><img src="/uploadfile/20110415160643792.gif" border="0"/></a></td>
               <td width="114"><a href="http://www.cnblogs.com/flash/s5.swf" style="border:none" ><img src="/uploadfile/20110415160644694.gif" border="0" /></a></td>
             </tr>
           </table></td>
           <td id=demo2 valign="top">&nbsp;</td></tr>
           <tr>
           <td><script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
 function Marquee(){
 if(demo.scrollLeft<=0)
 demo.scrollLeft+=demo2.offsetWidth
 else{
 demo.scrollLeft--
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>


           </td>
           </tr>
           </table>

</div>

[图片]向下续循环滚动

<DIV id=demo style="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 800px; COLOR: #0000ff; HEIGHT: 200px">
     <DIV id=demo1>
         <div align="center">
          <table width="100%" border="0">
         <tr>
         <td><img src="images/xiaotu/1.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/2.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/3.jpg" width="150" height="120" border="0"></td>
                     <td><img border="0" src="images/xiaotu/4.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/5.jpg" width="150" height="120" border="0"></td>
            </tr>
         <tr>
           <td><img border="0" src="images/xiaotu/6.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/7.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/8.jpg" width="150" height="120" border="0"></td>
                     <td><img border="0" src="images/xiaotu/9.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/10.jpg" width="150" height="120" border="0"></td>
         </tr>
                     <tr>
           <td><img border="0" src="images/xiaotu/11.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/12.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/13.jpg" width="150" height="120" border="0"></td>
                     <td><img border="0" src="images/xiaotu/14.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/15.jpg" width="150" height="120" border="0"></td>
         </tr>
                 </table>
         </div>
     </DIV>
     <DIV id=demo2></DIV>
 </DIV>


 <script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 demo.scrollTop=demo.scrollHeight
 function Marquee(){
 if(demo1.offsetTop-demo.scrollTop>=0)
 demo.scrollTop+=demo2.offsetHeight
 else{
 demo.scrollTop--
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>
[图片]向上续循环滚动

<DIV id=demo style="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 800px; COLOR: #0000ff; HEIGHT: 200px">
     <DIV id=demo1>
         <div align="center">
          <table width="100%" border="0">
         <tr>
         <td><img src="images/xiaotu/1.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/2.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/3.jpg" width="150" height="120" border="0"></td>
                     <td><img border="0" src="images/xiaotu/4.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/5.jpg" width="150" height="120" border="0"></td>
            </tr>
         <tr>
           <td><img border="0" src="images/xiaotu/6.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/7.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/8.jpg" width="150" height="120" border="0"></td>
                     <td><img border="0" src="images/xiaotu/9.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/10.jpg" width="150" height="120" border="0"></td>
         </tr>
                     <tr>
           <td><img border="0" src="images/xiaotu/11.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/12.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/13.jpg" width="150" height="120" border="0"></td>
                     <td><img border="0" src="images/xiaotu/14.jpg" width="150" height="120" border="0"></td>
         <td><img border="0" src="images/xiaotu/15.jpg" width="150" height="120" border="0"></td>
         </tr>
                 </table>
         </div>
     </DIV>
     <DIV id=demo2></DIV>
 </DIV>


 <script>
 var speed=30
 demo2.innerHTML=demo1.innerHTML
 function Marquee(){
 if(demo2.offsetTop-demo.scrollTop<=0)
 demo.scrollTop-=demo1.offsetHeight
 else{
 demo.scrollTop++
 }
 }
 var MyMar=setInterval(Marquee,speed)
 demo.onmouseover=function() {clearInterval(MyMar)}
 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </script>

[图片]左右来回续循环滚动<script LANGUAGE="JavaScript"><!--
step = 0;
 obj = new Image();
 function anim(xp,xk,smer) //smer = direction
 {
 obj.style.left = x;
 x += step*smer;
 if (x>=(xk+xp)/2) {
 if (smer == 1) step--;
 else step++;
 }
 else {
 if (smer == 1) step++;
 else step--;
 }
 if (x >= xk) {
 x = xk;
 smer = -1;
 }
 if (x <= xp) {
 x = xp;
 smer = 1;
 }
 // if (smer > 2) smer = 3;
 setTimeout('anim('+xp+','+xk+','+smer+')', 50);
 }
 function moveLR(objID,movingarea_width,c)
 {
 if (navigator.appName=="Netscape") window_width = window.innerWidth;
 else window_width = document.body.offsetWidth;
 obj = document.images[objID];
 image_width = obj.width;
 x1 = obj.style.left;
 x = Number(x1.substring(0,x1.length-2)); // 30px -> 30
 if (c == 0) {
 if (movingarea_width == 0) {
 right_margin = window_width - image_width;
 anim(x,right_margin,1);
 }
 else {
 right_margin = x + movingarea_width - image_width;
 if (movingarea_width < x + image_width) window.alert("No space for moving!");
 else anim(x,right_margin,1);
 }
 }
 else {
 if (movingarea_width == 0) right_margin = window_width - image_width;
 else {
 x = Math.round((window_width-movingarea_width)/2);
 right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
 }
 anim(x,right_margin,1);
 }
 }
 //--></script>

<img src="/uploadfile/20110415160644652.jpg" name="picture"
 style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="93">
 <script LANGUAGE="JavaScript"><!--
setTimeout("moveLR('picture',300,1)",10);
 //--></script>