DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 可自定義速度的js圖片無縫滾動示例分享
可自定義速度的js圖片無縫滾動示例分享
編輯:JavaScript綜合知識     

 這篇文章主要介紹了非常平滑的JS圖片滾動特效代碼,無縫循環,速度可自定義,大家參考使用吧

思路:   一組圖片 控制它的滾動條進行滾動 且此時對這組圖片進行復制並添加進原圖片組中,現在就有兩組圖片了。你可以想象一下,現在滾動條繼續滾動,原來那組圖片最後一張圖片已經滾至頂端且消失,復制的那組圖片的第一張跟在原圖最後一張圖片後出現,此時你就能感覺到無縫滾動了。 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>JS圖片向左滾動</title>     <style type="text/css">     img{      border: none;     }     </style> </head> <body> <div id="demo" style="overflow:hidden;width:500px;">   <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >     <tr>       <td id="demo1" valign="top" bgcolor="ffffff">       <!-- 特別注意,下面的圖片總寬度必須大於上面定義的demo的寬度,如上面demo的寬度為500px,則下面圖片總寬度必須大於500,否則會出現些問題! -->           <table border="0" cellspacing="0" cellpadding="0">           <tr align="center">             <td><a href="#" target="_blank"><img src="images/1.jpg" width="150" height="100"></a></td>             <td><a href="#" target="_blank"><img src="images/2.jpg" width="150" height="100"></a></td>             <td><a href="#" target="_blank"><img src="images/3.jpg" width="150" height="100"></a></td>             <td><a href="#" target="_blank"><img src="images/4.jpg" width="150" height="100"></a></td>             <td><a href="#" target="_blank"><img src="images/5.jpg" width="150" height="100"></a></td>           </tr>         </table>       </td>         <td id="demo2" valign="top">      </td>       </tr>   </table> </div>   <div id="msg"></div> <script type="text/javascript" src="jquery.js"></script>   <script type="text/javascript">      //0:定速度   var speed = 30;   //1:獲取元素  demo demo1 demo2   var demo = $("#demo");   var demo1 = $("#demo1");   var demo2 = $("#demo2");   //2:復制 demo1-->demo2   var cont = $("#demo1").html();   $("#demo2").html(cont);        //3:創建方法定時執行   function hello(){      var left = $("#demo").scrollLeft();   if(left >= $("#demo1").width()){    left = 0;   }else{    left++;   }   $("#demo").scrollLeft(left);    setTimeout("hello()",speed);    }   hello();   //   移動demo.scrollLeft();   </script> </body> </html>  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved