使用Javascript簡單實現圖片無縫滾動_javascript技巧

js無縫滾動效果幾乎在任何網頁上都能看到它的身影，有的可能是使用插件，其實使用原始的javascript比較簡單。

主要的是使用js位置知識。

1.innerHTML:設定或取得元素的html標籤

2.scrollLeft:設定或取得位於物件左邊界和視窗中目前可見內容的最左端之間的距

3.offsetWidth:設定或取得指定標籤的寬度

4.setInterval():設定方法定時啟動

5.clearInterval();清除定時器

效果圖：

先睹為快：demo

複製程式碼 程式碼如下:

   
   



   

       

图片滚动制作

       

---

   

     

       

         

           
• 

           
• 

           
• 

           
• 
     
         

         

         

       

     

     

        prev
     

     

        next
     

    
   

   

<script><br />   var wrap=document.getElementById('wrap');<br />   var list1=document.getElementById('list1');<br />   var list2=document.getElementById('list2');<br />   var prev=document.getElementById('prev');<br />   var next=document.getElementById('next');<br />   //建立複製一份內容清單<br />   list2.innerHTML=list1.innerHTML;<br />   //向左循環滾動<br />   function scroll(){<br />     if(wrap.scrollLeft>=list2.offsetWidth){<br />       wrap.scrollLeft=0;<br />     }<br />     else{<br />       wrap.scrollLeft ;<br />     }<br />   }<br />     timer = setInterval(scroll,1);<br />   //滑鼠停留使用clearInterval()<br />   wrap.onmouseover=function(){<br />     clearInterval(timer);<br />   }<br />   wrap.onmouseout=function(){<br />     timer = setInterval(scroll,1);<br />   }<br />   //向左加速<br />   function scroll_l(){<br />     if(wrap.scrollLeft>=list2.offsetWidth){<br />       wrap.scrollLeft=0;<br />     }<br />     else{<br />       wrap.scrollLeft ;<br />     }<br />   }<br />   //向右滾動<br />   function scroll_r(){<br />     if(wrap.scrollLeft<=0){<br />       wrap.scrollLeft =list2.offsetWidth;<br />     }<br />     else{<br />       wrap.scrollLeft--;<br />     }<br />   }   <br />   prev.onclick=function(){<br />     clearInterval(timer);<br />     change(0)<br />   }<br />   next.onclick=function(){<br />     clearInterval(timer);<br />     change(1)<br />   }<br />   function change(r){<br />     if(r==0){<br />       timer = setInterval(scroll_l,60);<br />       wrap.onmouseout = function(){<br />         timer = setInterval(scroll_l,60);<br />       }<br />     }<br />     if(r==1){<br />       timer = setInterval(scroll_r,60);<br />       wrap.onmouseout = function(){<br />         timer = setInterval(scroll_r,60);<br />       }<br />     } <br />   } <br /> </script>