EP.12 สร้างสไลด์โชว์ง่ายๆด้วยจาวาสคริปต์

noMerzy | 2016-06-20 13:34:38

วันนี้เราจะเอารูปสาวๆ TWICE มาทำสไลด์โชว์กันครับ

twice.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #slide { position: relative; padding: 0px; margin: 0px; list-style-type: none; } #slide li { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: 1; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } #slide li.active { opacity: 1; z-index: 2; } #slide li img { height: 400px; } </style> </head> <body> <ul id="slide"> <li><img src="ChaeYoung.jpg"></li> <li><img src="DaHyun.jpg"></li> <li><img src="JeongYeon.jpg"></li> <li><img src="JiHyo.jpg"></li> <li><img src="Mina.jpg"></li> <li><img src="Momo.jpg"></li> <li><img src="NaYeon.jpg"></li> <li><img src="Sana.jpg"></li> <li><img src="Tzuyu.jpg"></li> </ul> <script> //สไลด์ อิลิเมนต์ var slide = document.querySelectorAll('#slide li'); //สไลด์ปัจจุบัน var currentSlide = 0; //ลูปเปลี่ยนภาพทุกๆ 3 วินาที var slideInterval = setInterval(slideshow, 3000); //แสดงรูปภาพแรก slide[0].className = 'active'; //ฟังก์ชั่นเปลี่ยนภาพ function slideshow() { //ซ่อนภาพปัจจุบัน slide[currentSlide].className = ''; //เพิ่มค่าไสลด์ปัจจุบันเป็นภาพถัดไป currentSlide = (currentSlide + 1) % slide.length; //แสดงภาพ slide[currentSlide].className = 'active'; } </script> </body> </html>