Tip CSS : Image slideshow Indicators (สไลด์โชว์ภาพอย่างง่าย) โดยคลิ๊กที่ภาพตัวอย่าง

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 Indicators (สไลด์โชว์ภาพอย่างง่าย) โดยคลิ๊กที่ภาพตัวอย่าง

Post by pprn »

  • 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>
    .slider {display:none}
    .demo {cursor:pointer}
    </style>
    <body>
    
    <div class="w3-content" style="max-width:500px">
      <img class="slider" src="imge_name" style="width:100%">
    
      <div class="w3-row-padding w3-section">
        <div class="w3-col s4">
          <img class="demo w3-opacity w3-hover-opacity-off" src="imge_name" style="width:100%" onclick="funtion_name(1)">
        </div>
     
      </div>
    </div>
    
    <script>
    var slideIndex = 1;
    showDivs(slideIndex);
    
    function funtion_name(n) {
      showDivs(slideIndex += n);
    }
    
    function currentDiv(n) {
      showDivs(slideIndex = n);
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("slider");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
      }
      x[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " w3-opacity-off";
    }
    </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>
    .slider {display:none}
    .demo {cursor:pointer}
    </style>
    <body>
    
    <div class="w3-content" style="max-width:500px">
      <img class="slider" src="a.png" style="width:100%">
      <img class="slider" src="b.png" style="width:100%">
      <img class="slider" src="c.png" style="width:100%">
    
      <div class="w3-row-padding w3-section">
        <div class="w3-col s4">
          <img class="demo w3-opacity w3-hover-opacity-off" src="a.png" style="width:100%" onclick="currentDiv(1)">
        </div>
        <div class="w3-col s4">
          <img class="demo w3-opacity w3-hover-opacity-off" src="b.png" style="width:100%" onclick="currentDiv(2)">
        </div>
        <div class="w3-col s4">
          <img class="demo w3-opacity w3-hover-opacity-off" src="c.png" style="width:100%" onclick="currentDiv(3)">
        </div>
      </div>
    </div>
    
    <script>
    var slideIndex = 1;
    showDivs(slideIndex);
    
    function plusDivs(n) {
      showDivs(slideIndex += n);
    }
    
    function currentDiv(n) {
      showDivs(slideIndex = n);
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("slider");
      var dots = document.getElementsByClassName("demo");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
         dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
      }
      x[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " w3-opacity-off";
    }
    </script>
    
    </body>
    </html>
    
ผลลัพธ์เมื่อนำเมาส์มาคลิ๊กที่รูปเล็กด้านล่าง
  • รูป a.jpg
    [attachment=2]a1.JPG[/attachment]
    รูป b.jpg
    [attachment=1]a2.JPG[/attachment]
    รูป c.jpg
    [attachment=0]a3.JPG[/attachment]
[/b][/size]


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

----------------------------------------------------------------------------------------------------------------------------------------------------------------
Attachments
a1.JPG
a1.JPG (24.41 KiB) Viewed 2142 times
a2.JPG
a2.JPG (24.69 KiB) Viewed 2142 times
a3.JPG
a3.JPG (21.08 KiB) Viewed 2142 times

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests