图片上无缝滚动
向上滚动
<script> <br><!-- <BR>var speed=10; //数字越大速度越慢 <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 <BR>function Marquee(){ <BR>if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 <BR>tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 <BR>else{ <BR>tab.scrollTop++ <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 <BR>--> <br></script>
图片下无缝滚动
向下滚动
<script> <br><!-- <BR>var speed=10; //The larger the number, the slower the speed <BR>var tab=document.getElementById("demo"); <BR> var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //Clone demo1 as demo2 <BR>tab.scrollTop =tab.scrollHeight <BR>function Marquee(){ <BR>if(tab1.offsetTop-tab.scrollTop>=0)//When scrolling to the intersection of demo1 and demo2<br>tab.scrollTop =tab2.offsetHeight // demo jumps to the top <br>else{ <br>tab.scrollTop-- <br>} <br>} <br>var MyMar=setInterval(Marquee,speed); <br>tab.onmouseover=function() { clearInterval(MyMar)};//Clear the timer when the mouse moves up to stop the scrolling<br>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//Reset when the mouse moves away Timer<br>--> <br></script>
Picture left seamless scroll
Scroll left
<script> <br><!-- <BR>var speed=10; //The larger the number The slower the speed <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; <BR>function Marquee(){ <BR>if(tab2.offsetWidth-tab.scrollLeft<=0) <BR>tab.scrollLeft-=tab1.offsetWidth <BR>else{ <BR>tab.scrollLeft ; <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)}; <BR>tab.onmouseout =function() {MyMar=setInterval(Marquee,speed)}; <BR>--> <br></script>
Image right seamless scroll
Scroll right
<script> <br><!-- <BR>var speed=10; //The larger the number, the slower the speed. <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; <BR>function Marquee(){ <BR>if(tab.scrollLeft<=0) <BR>tab.scrollLeft =tab2 .offsetWidth <BR>else{ <BR>tab.scrollLeft-- <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar )}; <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; <BR>--> <br></script>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
