Use Javascript to easily achieve seamless scrolling of images_javascript skills

The js seamless scrolling effect can be seen on almost any web page. Some may use plug-ins. In fact, it is relatively simple to use original javascript.

The main thing is to use js position knowledge.

1.innerHTML: Set or get the html tag of the element

2.scrollLeft: Set or get the distance between the left edge of the object and the leftmost end of the currently visible content in the window

3.offsetWidth: Set or get the width of the specified label

4.setInterval(): Set the method to start regularly

5.clearInterval(); clear timer

Rendering:

Sneak peek: demo

Copy code The code is as follows:

   
   



   

       

图片滚动制作

       

---

   

     

       

         

           
• 

           
• 

           
• 

           
• 
     
         

         

         

       

     

     

        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> //Create a copy of the content list<br> list2.innerHTML=list1.innerHTML;<br> //Scroll leftward<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> //Use clearInterval()<br> when the mouse stays wrap.onmouseover=function(){<br> ClearInterval(timer);<br> }<br> wrap.onmouseout=function(){<br> Timer = setInterval(scroll,1);<br> }<br> //Accelerate to the left<br> function scroll_l(){<br> If(wrap.scrollLeft>=list2.offsetWidth){<br>         wrap.scrollLeft=0;<br> }<br> else{<br>         wrap.scrollLeft ;<br> }<br> }<br> //Scroll right <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>

A very concise and practical code, friends can just beautify it appropriately according to their own project needs.