CSS实现轮播图以及改进

作为一个前端菜鸡，最近在模仿着写一些简单的前端案例，
今天是用纯CSS实现了一个轮播图，主要是看着这个UP的视频做的 www.bilibili.com/video/BV1AT…
完成后效果如下：

做完后就想着能不能改成自动的，这个还是比较简单实现，直接用css3的@keyframes加动画效果就好

/* 大图片 */
.container ul .bigImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 400px;
  border: 5px solid transparent;
  background: url(../img/1.jpg) no-repeat;
  /* 背景图片尺寸 contain:扩展至最大尺寸，使其宽高完全适应内容区域*/
  background-size: contain;
  /* transition: all 0.5s; */
  animation: CarouselFigure-bigimage 10s alternate infinite;
}

/* 移动框 */
.container ul .frame {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 200px;
  height: 80px;
  border: 5px solid salmon;
  /* 会覆盖下面的图片，导致鼠标移动上来的时候选中的是这个移动框，禁止鼠标捕获即可 */
  /* pointer-events: none; */
  /* transition: all 0.5s; */
  animation: CarouseFigure-frame 10s alternate infinite;
}

@keyframes CarouselFigure-bigimage {
  0%,3% { background-image: url(../img/1.jpg); }
  25% { background-image: url(../img/2.jpg); }
  50% { background-image: url(../img/3.jpg); }
  75% { background-image: url(../img/4.jpg); }
  100% { background-image: url(../img/5.jpg); }
}
@keyframes CarouseFigure-frame {
  0%,3% { left: 0; }
  25% { left: 200px; }
  50% { left: 400px; }
  75% { left: 600px; }
  100% { left: 800px; }
}

这样，就简单的改成了一个自动播放的轮播图，0%,3%这么设置主要是为了能在第一张图停留时间长一些，如果0%的话会停留时间比较短，另外设置了alternate属性，实现了来回切换，效果如下：

接着实现了鼠标选中时动画暂停的功能：

/* 选中某个图，暂停动画 */
.container ul .frame:hover {
  animation-play-state: paused;
}
.container ul .frame:hover ~ .bigImage {
  animation-play-state: paused;
}

但是，在实现自动播放功能后，之前的选中某张图片时自动切换到对应图片的功能就无法实现了，并且，因为要实现动画暂停的功能，就把移动框的鼠标捕获恢复了：

  /* 会覆盖下面的图片，导致鼠标移动上来的时候选中的是这个移动框，禁止鼠标捕获即可 */
  /* pointer-events: none; */

所以，目前就是使用纯CSS不能同时实现轮播图自动播放和选中切换图片，当前的想法是或许可以分别再重新设置伪元素进行覆盖，等实现了再来更新~