javascript/js各种方向图片无限无缝滚动

javascript/js图片向上无限无缝滚动

​
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
<div id="demo1">
    <img src="yue.jpg">
    <img src="yue.jpg">
    <img src="yue.jpg">
    <img src="yue.jpg">
    <img src="yue.jpg">
</div>
<div id=demo2></div>
</div>
   <script>
   var speed=50;//控制滚动的速度快慢
   demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
   function Marquee(){
       if(demo2.offsetTop-demo.scrollTop<=0)//当demo1与demo2的交界处滚动至demo顶端时
               demo.scrollTop-=demo1.offsetHeight;
       else{
               demo.scrollTop++;//demo向上滚动一个像素
       }
   }
   var MyMar=setInterval(Marquee,speed);//设置定时器
   demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
   </script>
<p><a href="http://www.yydpt.com" target="_blank">月影web</a></p>

​

 

javascript/js图片向下无限无缝滚动

​
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
<div id="demo1">
    <img src="yue.jpg">
    <img src="yue.jpg">
    <img src="yue.jpg">
    <img src="yue.jpg">
    <img src="yue.jpg">
</div>
<div id=demo2></div>
</div>
   <script>
   var speed=50;//控制滚动的速度快慢
   demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
   demo.scrollTop=demo.scrollHeight;
   function Marquee(){
       if(demo1.offsetTop-demo.scrollTop>=0)
               demo.scrollTop+=demo2.offsetHeight;
       else{
               demo.scrollTop--;
       }
   }
   var MyMar=setInterval(Marquee,speed);//设置定时器
   demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
   </script>
<p><a href="http://www.yydpt.com" target="_blank">月影web</a></p>

​

 

javascript/js图片向左无限无缝滚动

​
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
    <div id="indemo" style="float:left;width:1400%">
        <div id="demo1" style="float:left">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
        </div>
    </div>
<div id="demo2" style="float:left"></div>
</div>
   <script>
   var speed=50;//控制滚动的速度快慢
   demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
   function Marquee(){
       if(demo2.offsetWidth-demo.scrollLeft<=0)
               demo.scrollLeft-=demo1.offsetWidth;
       else{
               demo.scrollLeft++;
       }
   }
   var MyMar=setInterval(Marquee,speed);//设置定时器
   demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
   </script>
<p><a href="http://www.yydpt.com" target="_blank">月影web</a></p>

​

 

javascript/js图片向右无限无缝滚动

​
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
    <div id="indemo" style="float:left;width:1400%">
        <div id="demo1" style="float:right">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
            <img src="yue.jpg">
        </div>
        <div id="demo2" style="float:right"></div>
    </div>   
</div>
   <script>
   var speed=50;//控制滚动的速度快慢
   demo2.innerHTML=demo1.innerHTML;//将demo1里面的内容放到demo2里面
   demo.scrollLeft=demo.scrollWidth;
   function Marquee(){
      if(demo.scrollLeft<=0)
          demo.scrollLeft+=demo2.offsetWidth;
      else{
          demo.scrollLeft--;
      }
   }
   var MyMar=setInterval(Marquee,speed);//设置定时器
   demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
   </script>
<p><a href="http://www.yydpt.com" target="_blank">月影web</a></p>

​

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；