Image Slideshow

Slideshow ด้วย CSS3 และ Javscript รองรับการแสดงผลบนมือถือ ไม่ง้อ JQuery

Slideshow แบบนี้จะเป็นแบบง่ายๆนะครับ โดยมีจุดเด่นที่การใช้ CSS3 ในการทำ Effect และ ใช้ Javascript อีกเล็กน้อยในการควบคุมการแสดงผลของ Slideshow และนอกจากนี้ยังรองรับการใช้งานแบบ Responsive อีกด้วย

<div class="slide_show" id="ss_demo">
    <img src="http://school.gcms.in.th/upload/slideshow/1.jpg">
    <img src="http://school.gcms.in.th/upload/slideshow/2.jpg">
    <img src="http://school.gcms.in.th/upload/slideshow/3.jpg">
</div>

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');

ในครั้งแรกที่มีการเรียก 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 เป็นอย่างอื่นได้โดยกำหนดรูปแบบในส่วนที่ผมทำเครื่องหมายไว้

Reference :.

Project อื่น ๆ

PreviousThe Best jQuery Examples NextHandle Timezones

Last updated 5 years ago

hashtagSlideshow ด้วย CSS3 และ Javscript รองรับการแสดงผลบนมือถือ ไม่ง้อ JQuery

Slideshow ด้วย CSS3 และ Javscript รองรับการแสดงผลบนมือถือ ไม่ง้อ JQuery