何かとスライドショーの出番は多いわけですが、
巷のプラグインのような機能盛りだくさんはいらなくて、フェード切り替えだけすればいいってものを作ってみました。
<div class="slide-area"> <div class="show"><img src="xxx.jpg"></div> <div><img src="yyy.jpg"></div> <div><img src="zzz.jpg"></div> </div>
.slide-area { position: relative; margin: 3em 0; width: 640px; height: 400px; overflow: hidden; } .slide-area > div { position: absolute; top: 0; left: 0; transition: opacity .8s ease; opacity: 0; } .slide-area > div.show { opacity: 1; z-index: 10; } img { max-width: 100%; }
let slideBox = document.querySelector('.slide-area'); let slideArray = slideBox.children; const slide = setInterval( slideshow, 5000); function slideshow() { let firstItem = slideBox.firstElementChild; firstItem.classList.remove('show'); slideBox.appendChild(firstItem); slideArray[0].classList.add('show'); }
1番目の要素を取って、最後に追加して、フェードはCSSで対応してます。