如何实现div内图片从右到左循环滑动现有代码运行图片不显示

DevOps 小满

2026-9-28

问题原因排查&解决方案

你当前代码图片无法正常展示是以下几个核心问题导致的：

父容器.slideshow没有设置宽高，绝对定位的子元素不会撑开父容器，导致父容器高度为0，视觉上看不到内容
背景图没有显式设置横向重复属性，同时要确保url(images/image.png)的图片路径和你本地文件路径匹配
没有控制背景图的尺寸适配容器高度

修改后的HTML代码

<div class="slideshow">
  <div class="imgslide"></div>
</div>

修改后的CSS代码

.slideshow {
  position: relative;
  overflow: hidden;
  /* 可自定义为你需要的轮播区域宽高 */
  width: 100vw;
  height: 300px;
}
.imgslide {
  /* 拆分背景属性明确配置 */
  background-image: url(images/image.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  /* 宽度和动画位移匹配，3倍父宽度对应位移-200% */
  width: 300%;
  animation: slideshow 10s linear infinite;
}
@keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}