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
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>
//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.