Webkit keyframes实现的图片轮播无法展示全部图片问题修复咨询

核心问题原因 #

• 轮播容器.Scroll_Image宽度仅设置为100%（和外层可视窗口同宽300px），无法横向容纳3张宽度各300px的图片，导致图片默认换行堆叠，移动时无法展示后续内容
• 动画错误绑定到了单个.Image元素上，实际需要控制的是承载所有图片的.Scroll_Image整体位移
• 位移方向错误：要展示右侧的后续图片，需要让整个图片容器向左偏移（left为负值），原有代码设置正值向右偏移，只会把当前图片移出可视区域，露出空白背景
• 单个.Image没有设置横向排列规则，默认块级元素会纵向堆叠

修正后的CSS代码 #

.Image_Cont {
  top: 20%;
  left: 40%;
  position: absolute;
  width: 300px;
  height: 450px;
  background-color: #fff;
  overflow: hidden;
}

.Scroll_Image {
  top: 0;
  left: 0;
  position: absolute;
  /* 总宽度 = 单张图宽度 * 图片数量 */
  width: 900px;
  height: 100%;
  /* 绑定动画到整个图片容器 */
  animation: slide_animation 3s infinite alternate running;
}

.Image {
  width: 300px;
  height: 100%;
  /* 设置左浮动让图片横向排列 */
  float: left;
  position: relative;
}

.Image img {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes slide_animation {
  0% { left: 0; }
  10% { left: 0; }
  20% { left: -300px; }
  30% { left: -300px; }
  40% { left: -600px; }
  50% { left: -600px; }
  60% { left: -300px; }
  70% { left: -300px; }
  80% { left: 0; }
  90% { left: 0; }
  100% { left: 0; }
}

改动说明 #

• 将.Scroll_Image宽度调整为900px，刚好容纳3张横向排列的轮播图
• 动画绑定从单个.Image改为.Scroll_Image，控制整个图片组的位移
• 调整keyframes的位移值为负值，实现向左移动露出右侧图片的效果
• 给.Image添加float: left属性，让3张图片横向排列不换行
• 移除了冗余的webkit前缀，现代浏览器均支持标准animation属性，如果需要兼容旧版webkit内核浏览器，可以重新加上-webkit-前缀的对应规则

内容的提问来源于stack exchange，提问作者zachareaislam