DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS圖片左右無縫隙滾動的實現(兼容IE,Firefox 遵循W3C標准)
JS圖片左右無縫隙滾動的實現(兼容IE,Firefox 遵循W3C標准)
編輯：關於JavaScript     

**兼容IE,Firefox 遵循W3C標准寫法的圖片無縫滾動代碼（支持左移/右移功能）(本示例為上下兩行圖片進行雙行滾動)

**實現思路：一個設定寬度並且隱藏超出它寬度的內容的容器demo，裡面放demo1和demo2，demo1是滾動內容,demo2為demo1的直接克隆，

**通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，當滾動至demo1與demo2的交界處時直接跳回初始位置，

**因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到“無縫”滾動的目的。

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!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 id="Head1" runat="server">
 <title></title>
</head>
<body>
 <img src="link.gif" style="cursor: pointer" onmouseover="clearright();toleft()" />
 <img src="link1.gif" style="cursor: pointer" onmouseover="clearleft();toright()" />
 <div>
  <div id="demo" style="overflow: hidden; width: 322px; height: 61px">
   <table cellpadding="0" align="left" border="0" cellspace="0">
    <tbody>
     <tr>
      <td id="demo1" valign="top">
       <table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
        <tbody>
         <tr align="center">
          <td width="50" height="50">
           <img height="50" src="link.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link1.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link2.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link3.gif" />
          </td>
         </tr>
        </tbody>
       </table>
      </td>
      <td id="demo2" valign="top">
      </td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
 <div>
  <div id="demo_a" style="overflow: hidden; width: 322px; height: 61px">
   <table cellpadding="0" align="left" border="0" cellspace="0">
    <tbody>
     <tr>
      <td id="demo_b" valign="top">
       <table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
        <tbody>
         <tr align="center">
          <td width="50" height="50">
           <img height="50" src="link.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link1.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link2.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link.gif" />
          </td>
          <td width="50" height="50">
           <img height="50" src="link3.gif" />
          </td>
         </tr>
        </tbody>
       </table>
      </td>
      <td id="demo_c" valign="top">
      </td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
 <script type="text/javascript">
 /*
 **兼容IE,Firefox 遵循W3C標准寫法的圖片無縫滾動代碼（支持左移/右移功能）(本示例為上下兩行圖片進行雙行滾動)
 **
 **實現思路：一個設定寬度並且隱藏超出它寬度的內容的容器demo，裡面放demo1和demo2，demo1是滾動內容,demo2為demo1的直接克隆，
 **通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，當滾動至demo1與demo2的交界處時直接跳回初始位置，
 **因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到“無縫”滾動的目的。
 */
 var speed1=0  //圖片左移的速度
 var MyMar1  //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用於第一行圖片)
 var MyMar2  //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用於第二行圖片)
 var lefthit=0    //記錄左移按鈕點擊次數
 var righthit=0  ////記錄右移按鈕點擊次數 
 //調用右移方法前,先讓左移停止（clearInterval清除setInterval對方法的調用）
 function clearleft(){
   clearInterval(MyMar1)
   clearInterval(MyMar2)
 }
 //圖片左移的方法
 function toleft(){
    //判斷是否是第一次按下左移按鈕（圖片往左開始移動的時候，不會在調用此方法。只有當按了右移按鈕時，才會把lefthit重設為0）
   if(lefthit==0){
     speed1=30;//圖片左移速度時間毫秒
     //讓的內容demo2與demo1內容一樣
     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
     //上行圖片移動的方法
     function Marquee1(){
        //當demo滾動至demo2的交界處。與就是與demo2重合時。offsetWidth與scrollLeft剛好相等
       if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
         //demo跳回初始位置
         document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
       }
       else{
         //demo開始重新移動
         document.getElementById("demo").scrollLeft++
       }
     }
     //setInterval讓Marquee1方法每隔多少秒執行一次，並把返回的調用次數ID
     MyMar1=setInterval(Marquee1,speed1)
     //當鼠標移動demo上面時。調用clearInterval清除MyMar1.這樣圖片便不會在移動了。移到圖片時，第一行和第二行的圖片都會停止
     document.getElementById("demo").onmouseover=function()
     {clearInterval(MyMar1);clearInterval(MyMar2)}
     //當鼠標移除demo時,重新setInterval讓方法執行，這樣圖片會繼續移動
     document.getElementById("demo").onmouseout=function()
     {MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
      //下面的方法與上面的方法一樣，用於第二行的圖片向左移動
      document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
     function Marquee2(){
       if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){
         document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth}
       else{
         document.getElementById("demo_a").scrollLeft++
       }
     }
     MyMar2=setInterval(Marquee2,speed1)
     document.getElementById("demo_a").onmouseover=function()
     {clearInterval(MyMar2);clearInterval(MyMar1)}
     document.getElementById("demo_a").onmouseout=function()
     {MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()}
     lefthit=1    //設置左移按鈕，當按了一次左移後(不管按多少次)，在沒按右移按鈕之前，toleft方法裡的的代碼不會再被執行
     righthit=0  //把右移按鈕設為0,這樣當下次點了右移按鈕的時候，以便toright方法被調用
   }
 }
 
 
 var MyMar3  //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用於第一行圖片)
 var MyMar4  //setInterverval方法返回的間隔ID,些ID為全局的調用次數(用於第二行圖片)
 var speed2=0  //圖片右移的速度
 //調用移左方法前,先讓右移停止（clearInterval清除setInterval對方法的調用）
 function clearright(){
   clearInterval(MyMar3)
   clearInterval(MyMar4)
 }
 
 
 //圖片右移方法(與圖片左移方法思路一樣)
 function toright(){
     //判斷是否是第一次按下右移按鈕（圖片往右開始移動的時候，不會在調用此方法。只有當按了左移按鈕時，才會把righthit重設為0）
   if(righthit==0){
     speed2=30;
     document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
     function Marquee_a(){
       if(document.getElementById("demo").scrollLeft<=0){
         document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
       }
       else{
         document.getElementById("demo").scrollLeft--
       }
     }
     MyMar3=setInterval(Marquee_a,speed2)
     document.getElementById("demo").onmouseover=function()
     {clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()}
     document.getElementById("demo").onmouseout=function()
     {MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}
    
     
     document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
     function Marquee_b(){
       if(document.getElementById("demo_a").scrollLeft<=0){
         document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth
       }
       else{
         document.getElementById("demo_a").scrollLeft--
       }
     }
     MyMar4=setInterval(Marquee_b,speed2)
     document.getElementById("demo_a").onmouseover=function()
     {clearInterval(MyMar4);clearInterval(MyMar3)}
     document.getElementById("demo_a").onmouseout=function()
     {MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()}
     righthit=1  //設置右移按鈕，當按了一次右移按鈕後(不管按多少次)，在沒按左移按鈕之前，toright方法裡的的代碼不會再被執行
     lefthit=0  //把左移按鈕設為0,這樣當下次點了左移按鈕的時候，以便toleft方法被調用
   }
 }
 </script>
</body>
</html>

以上就是小編為大家帶來的JS圖片左右無縫隙滾動的實現(兼容IE,Firefox 遵循W3C標准)的全部內容了，希望對大家有所幫助，多多支持~

關於JavaScript
JS判斷來路是否是百度等搜索索引進行彈窗或自動跳轉的實現代碼
比如百度收錄了你的a,你希望從a站被點擊訪問後,再跳轉或彈出b站,可以用下面的方式.當然可以直接用w
jQuery模板:jQuery Templates Proposal
導言（Introduction）這個提案描述了如何在jQuery的核心庫中增加模板支持。更為特別是，
使用Node.js配合Nginx實現高負載網絡
 在搭建高吞吐量web應用這個議題上，NginX和Node.js可謂是天生一對。他們都是基

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
javascript 使用 NodeList需要注意的問題 從腳本編程的角度看JSP的安全 最佳JS代碼編寫的14條技巧 js控制TR的顯示隱藏 JS實現星星評分功能實例代碼(兩種方法) JS練習實例:javascript實現全選/全不選/反選 老生常談遮罩層 滾動條的問題 js中通過split函數分割字符串成數組小例子 淺談JS原型對象和原型鏈 自己編寫的類似JS的trim方法
熱門推薦
js繼承實現方法詳解 JavaScript快速檢測浏覽器對CSS3特性的支持情況 互聯網公司招聘web前端筆試題目 js利用appendChild對<li>標簽進行排序的實現方法 js改進window.onload方法document.ready javascript動態創建表格及添加數據實例詳解 javascript 浏覽器類型和版本號檢測代碼(兼容多浏覽器) JavaScript實現網頁對象拖放功能的方法 JavaScript獲取頁面上被選中文字的方法教程技巧
大家都在看
針對各浏覽器的九大CSS隱藏技巧 原生JS實現九宮格抽獎效果 簡介JavaScript中的setTime()方法的使用 網頁制作有用資料:網頁常用英文字體 javascript實現表格排序 編輯 拖拽 縮放 javaScript如何生成xmlhttp 產品設計師應該具備的幾種能力 以用戶為中心的設計:怎樣讓用戶回訪
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved