js实现图片从左到右循环播放

以前看同学的微信小游戏。背景场景是一张长图循环播放的。那么怎么实现循环播放呢？

<!DOCTYPE html>
<html>
  <head>
    <title>图片向右循环滚动</title>
    <style>
      .picture {
    
    
        width: 200px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="demo" style="overflow:hidden;height:100px;width:800px;">
      <table align="left" cellpadding="0" cellspace="0" border="0">
        <tr>
          <td id="demo1" valign="top" nowrap="nowrap">
            <img class="picture" src="./road(2).jpg" />
            <img class="picture" src="./sea2 (1).jpg" />
            <img class="picture" src="./sea2 (4).jpg" />
            <img class="picture" src="./sea3.jpg" />
          </td>
          <td id="demo2" valign="top" nowrap="nowrap"></td>
        </tr>
      </table>
    </div>
    <script>
      var speed = 50
      demo2.innerHTML = demo1.innerHTML
      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>
  </body>
</html>

如果想运行需要修改img标签内的图片路径。里面放的是我的图片。
最关键的是scrollLeft和offsetWidth和setInterval进行定时移动。

demo1和demo2里面是两遍图片。

demo2.innerHTML = demo1.innerHTML

scrollLeft指的是水平滚动轮距离当前最左边的位置
offsetWidth = width + padding + border
scrollWidth:获取对象的滚动宽度
clientWidth = width + padding

分析过程：
初始时：demo.scrollLeft为0，运行Marquee函数时。
demo.scrollLeft += demo2.offsetWidth
这时候界面显示的其实是demo2，
demo1现在在浏览器的左面，超出了显示范围。
之后进行scrollLeft减小，效果是图片向右移动，左边的demo1一点一点显示出来。当demo1显示完后，重新让demo1换到demo2的左边，demo1超出浏览器界面的左边。
这样的话需要设计demo的宽度正好等于图片宽度之和。设置overflow:hidden
并设置demo1和demo2的nowrap:nowrap使得图片不换行。

js实现图片从左到右循环播放

猜你喜欢