Warning: file_get_contents(/home/gcms/public_html/skin/datas/users/goro/skin/2017/amp.css): failed to open stream: No such file or directory in /home/gcms/public_html/Gcms/Amp.php on line 32
Slideshow ด้วย CSS3 และ Javscript รองรับการแสดงผลบนมือถือ ไม่ง้อ JQuery

GORAGOD

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>

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