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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

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

Postby pprn » 12/07/2018 3:00 pm

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

รูปแบบโค้ด

    Code: Select all

    <!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 คือ ชื่อคลาสที่ใช้ค่อยๆแสดงภาพ

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

    Code: Select all

    <!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) Viewed 1882 times

    รูป a.jpg
    a.png
    a.png (5.34 KiB) Viewed 1882 times

    รูป b.jpg
    b.png
    b.png (4.52 KiB) Viewed 1882 times

    รูป c.jpg
    c.png
    c.png (2.68 KiB) Viewed 1882 times



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

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

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests