Slideshow ด้วย CSS3 และ Javscript รองรับการแสดงผลบนมือถือ ไม่ง้อ JQuery
<div class="slide_show" id="ss_demo">
<img src="https://goragod.com/upload/slideshow/1.jpg">
<img src="https://goragod.com/upload/slideshow/2.jpg">
<img src="https://goragod.com/upload/slideshow/3.jpg">
</div>ส่วนแรกจะเป็นส่วนของ HTML โดยที่ Slideshow จะมีรูปภาพทั้งหมดจำนวนกี่รูปก็ได้ตาม tag img แต่สิ่งที่สำคัญคือ รูปภาพทุกรูปที่นำมาใช้ควรมีขนาดเท่าๆกันทั้งหมด เพื่อให้การแสดงผล Slideshow สวยงาม
function playSlideShow(id) {
function show(n) {
/* รูปทั้งหมด */
var imgs = document.getElementById(id).getElementsByTagName('img');
var l = imgs.length;
/* ถึงรูปสุดท้าย กลับไปรูปแรก */
n = n == l ? 0 : n;
for (var a = 0; a < l; a++) {
/* image */
var img = imgs[a];
if (a == n) {
/* รูปที่ต้องการแสดง */
img.className = 'select';
} else {
/* รูปอื่นๆ clear class */
img.className = '';
}
}
/* คืนค่ารูปที่กำลังแสดง */
return n;
}
/* แสดงรูปแรก */
var position = show(0);
/* จับเวลาเปลี่ยนรูปภาพทุก 3 วินาที (3*1000ms) */
window.setInterval(function() {
/* แสดงรูปถัดไป */
position = show(position + 1);
}, 3000);
}
/* แสดง slide show */
playSlideShow('ss_demo');ถัดมาคือส่วนของ javascript ฟังก์ชั่นที่ทำหน้าที่แสดงผล Slideshow คือ playSlideShow('ss_demo'); จะเห็นว่ามีการส่งค่า id ของพื้นที่แสดงผล Slideshow (ss_demo) ให้กับฟังก์ชั่น ซึ่งข้อดีคือ การออกแบบฟังก์ชั่นในลักษณะนี้ เราสามารถมี Slideshow กี่ตัวก็ได้โดยใช้ฟังก์ชั่นเดียวกัน เพียงแต่เปลี่ยน id ของ Slodeshow เป็นอันอื่นเท่านั้น
- ในครั้งแรกที่มีการเรียก Slideshow จะแสดงรูปภาพแรกในทันทีโดยการเรียกฟังก์ชั่น show(0)
- ฟังก์ชั่น show จะทำหน้าที่วนลูปไปยัง tag img ที่อยู่ภายในทุกตัว โดยที่ tag img ลำดับที่ตรงกับค่าที่ส่งให้ฟังก์ชั่น จะมีการใส่ class select ให้กับ tag นั้นๆ และเช่นเดียวกัน tag img ตัวอื่นๆก็จะถูกกำหนดให้มี class ว่างๆ (หรือไม่มี class)
- ฟังก์ชั่น show จะคืนค่า ลำดับของ tag img ที่ใส่ class select เนื่องจากหากค่าที่ส่งให้ฟังก์ชั่นเกินกว่า tag ที่มี เช่น เป็นรูปสุดท้าย ค่าที่ส่งกลับจะไปเริ่มต้นที่ 0 ใหม่
- ฟังก์ชั่น window.setInterval จะทำหน้าที่จับเวลาเพื่อเปลี่ยนรูปภาพถัดไปมาแสดง โดยมีระยะห่างระหว่างแต่ละรูปเป็น 3000ms หรือ 3 วินาทีนั่นเอง โดยเมื่อครบกำหนดจะมีการส่งค่า position + 1 ให้ฟังก์ชั่น show เพื่อแสดงรูปถัดไป
.slide_show {
position: relative;
/* responsive */
display: inline-block;
width: 100%;
}
.slide_show img {
position: absolute;
left: 0;
top: 0;
/* responsive image */
width: 100%;
max-width: 100%;
height: auto;
/* speed ของ effect */
transition: 1s;
/* fade out*/
opacity: 0;
}
.slide_show img.select {
/* fade in */
opacity: 1;
}โค้ดส่วนสุดท้ายคือโค้ด CSS ซึ่งทำหน้าที่ควบคุม Effect และ การแสดงผลแบบ Responsive ในตัวอย่างนี้ Effect ที่ใช้คือ fade in-out (โดยการใช้ opacity) ซึ่งสามารถเปลี่ยนรูปแบบของ Effect เป็นอย่างอื่นได้โดยกำหนดรูปแบบในส่วนที่ผมทำเครื่องหมายไว้
ตัวอย่าง