首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 16:29:00
原創
1620 人瀏覽過

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

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

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

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

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

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

5.clearInterval();清除定時器

效果圖:

先睹為快:demo

複製程式碼 程式碼如下:




   
    javascript scroll制作



   

       

图片滚动制作


       

   

     

       

         

               

  •            

  •            

  •            
  •      
             

         

             

       

     

     
          
   

   

<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> 
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板