หน้า 1 จากทั้งหมด 1

Tip CSS : Image slideshow Faded Animation (สไลด์โชว์ภาพอย่างง่าย) โดยค่อยๆแสดงภาพ

โพสต์แล้ว: 12/07/2018 3:00 pm
โดย pprn
    CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ

รูปแบบโค้ด

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <title>CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>

    <div class="w3-content w3-section" style="max-width:500px">
      <img class="slider w3-animate-fading" src="image_name" style="width:100%">
    </div>

    <script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("slider");
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none"; 
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}   
        x[myIndex-1].style.display = "block"; 
        setTimeout(carousel, 9000);   
    }
    </script>

    </body>
    </html>

    อธิบายโค้ด
      - image_name คือ ชื่อรูปภาพที่ต้องการโชว์
      - slider w3-animate-fading คือ ชื่อคลาสที่ใช้ค่อยๆแสดงภาพ

ตัวอย่างโค้ด

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <title>CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>

    <div class="w3-content w3-section" style="max-width:500px">
      <img class="slider w3-animate-fading" src="a.png" style="width:100%">
      <img class="slider w3-animate-fading" src="b.png" style="width:100%">
      <img class="slider w3-animate-fading" src="c.png" style="width:100%">
    </div>

    <script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("slider");
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none"; 
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}   
        x[myIndex-1].style.display = "block"; 
        setTimeout(carousel, 9000);   
    }
    </script>

    </body>
    </html>

ผลลัพธ์ภาพจะเปลี่ยนทุกๆ 10 วินาที


    ตัวอย่างช่วงการเปลี่ยนภาพ
    faded.JPG
    faded.JPG (16.15 KiB) เปิดดู 1778 ครั้ง

    รูป a.jpg
    a.png
    a.png (5.34 KiB) เปิดดู 1778 ครั้ง

    รูป b.jpg
    b.png
    b.png (4.52 KiB) เปิดดู 1778 ครั้ง

    รูป c.jpg
    c.png
    c.png (2.68 KiB) เปิดดู 1778 ครั้ง



----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------