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

最新推荐文章于 2024-07-18 10:05:33 发布

一枚前端猿

最新推荐文章于 2024-07-18 10:05:33 发布

阅读量2.7k

点赞数 1

文章标签： js 图片循环播放 javascript

本文链接：https://blog.csdn.net/qq_42535651/article/details/104122634

版权

本文介绍如何利用JavaScript实现图片从左到右循环播放的效果。关键在于运用scrollLeft、offsetWidth和setInterval定时移动，确保图片无缝衔接。通过设置元素的scrollLeft属性，结合offsetWidth调整滚动位置，实现图片在视窗中的平滑移动。同时，需要将图片的总宽度设置为容器宽度，并使用overflow:hidden和white-space:nowrap避免图片换行。

摘要由CSDN通过智能技术生成

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

<!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