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

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

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

ภาพประจำตัวสมาชิก
pprn
PHP Super Member
PHP Super Member
โพสต์: 392
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

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

โพสต์โดย pprn » 12/07/2018 3:00 pm

    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) เปิดดู 130 ครั้ง

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

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

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



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

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 5 และ บุคคลทั่วไป 0 ท่าน