Tip CSS : Aytomatic Image slideshow (สไลด์โชว์ภาพอย่างง่าย) โดยอัตโนมัติ

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 : Aytomatic Image slideshow (สไลด์โชว์ภาพอย่างง่าย) โดยอัตโนมัติ

Post by pprn » 12/07/2018 2:34 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">
    <style>
    .silder {display:none;}
    </style>
    <body>
    
    <div class="w3-content w3-section" style="max-width:500px">
      <img class="class_name" src="image_name" style="width:100%">
    </div>
    
    <script>
    var myIndex = 0;
    carousel();
    
    function carousel() {
        var i;
        var x = document.getElementsByClassName("silder");
        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, 2000); // Change image every 2 seconds
    }
    </script>
    
    </body>
    </html>
  • อธิบายโค้ด
    • - image_name คือ ชื่อรูปภาพที่ต้องการโชว์
      - funtion_name คือ ชื่อฟังก์ชั่น
      - showDivs() คือ การแสดงภาพแรกขึ้นมา
      - class_name คือ ชื่อคลาส
ตัวอย่างโค้ด
  • 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">
    <style>
    .silder {display:none;}
    </style>
    <body>
    
    <div class="w3-content w3-section" style="max-width:500px">
      <img class="silder" src="a.png" style="width:100%">
      <img class="silder" src="b.png" style="width:100%">
      <img class="silder" src="c.png" style="width:100%">
    </div>
    
    <script>
    var myIndex = 0;
    carousel();
    
    function carousel() {
        var i;
        var x = document.getElementsByClassName("silder");
        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, 2000); // Change image every 2 seconds
    }
    </script>
    
    </body>
    </html>
    
ผลลัพธ์

[list]รูป a.jpg
[attachment=2]a.png[/attachment]
รูป b.jpg
[attachment=1]b.png[/attachment]
รูป c.jpg
[attachment=0]c.png[/attachment][/list][/b]


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

----------------------------------------------------------------------------------------------------------------------------------------------------------------
Attachments
a.png
a.png (5.34 KiB) Viewed 2488 times
b.png
b.png (4.52 KiB) Viewed 2488 times
c.png
c.png (2.68 KiB) Viewed 2488 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 8 guests