TESTBOXの種明かし

 

HTML

---

<div class="slideshow">
<img src="slide01.png" />
<img src="slide02.png" />
<img src="slide03.png" />
<img src="slide04.png" />
</div>
<p><img src="placeholder.png" /></p>

最後のはスペースを確保するためのプレースホルダー。本来はDivの大きさ指定でどうにかなるんですが、記事で指定しても消されちゃうので強引に同じサイズの透過画像を入れてます。実際の実装時には改行とかで代用できるかと

 

CSS

---

.slideshow { 
  max-width: 100%;
  position: relative;
}

.slideshow img { 
  animation: fade 12s infinite;
  -webkit-animation: fade 12s infinite;
  height: auto;
  max-width: 100%;
  opacity: 0;
  position: absolute; 
}

@keyframes fade {
  0% {opacity:0}
  5% {opacity:1}
  20% {opacity:1}
  25% {opacity:0}
 }

@-webkit-keyframes fade {
  0% {opacity:0}
  5% {opacity:1}
  20% {opacity:1}
  25% {opacity:0}
}

.slideshow img:nth-of-type(1) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

.slideshow img:nth-of-type(2) {
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.slideshow img:nth-of-type(3) {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

.slideshow img:nth-of-type(4) {
  animation-delay: 9s;
  -webkit-animation-delay: 9s;
}

.slideshow img {
  transition: 0.2s;
  -webkit-transition:0.2s;
}

.slideshow:hover img {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

切り替え速度は調節可能。枚数は固定で4枚(増減可能)

画像にカーソルを置くとアニメーションが一時停止します

画像をクロスフェードさせることも可能ですが、4→1の切り替えに難あり