บทความนี้ส่วนใหญ่เรียนรู้ปลั๊กอิน JavaScript - Carousel หากไม่มีความกังวลใจเพิ่มเติมเพียงไปเรียน บทช่วยสอนที่สมบูรณ์สามารถดูได้: การสอน Bootstrap 3.0
ม้าหมุน
ต่อไปนี้เป็นเคสม้าหมุนที่ทำโดยปลั๊กอินและส่วนประกอบที่เกี่ยวข้องนี้
<body> <div id = "carousel-example-generic" data-ride = "Carousel"> <!-ตัวบ่งชี้-> <ol> <li data-target = "#carousel-example-generic" slide-to = "0"> </li> data-target = "#carousel-example-generic" data slide-to = "2"> </li> </ol> <!-wrapper สำหรับสไลด์-> <div style = "text-allign: center"> <div> <img>/img> </div> href = "#carousel-example-generic" data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <span> src = "js/bootstrap.min.js"> </script> <script type = "text/javaScript" >/ $ ('. Carousel'). Carousel ('next'); </script> </body>Internet Explorer 8 & 9 ไม่สนับสนุนเอฟเฟกต์ภาพเคลื่อนไหวการเปลี่ยนแปลง
Bootstrap ใช้เอฟเฟกต์แอนิเมชั่นตาม CSS3 แต่ Internet Explorer 8 & 9 ไม่รองรับคุณสมบัติ CSS ที่จำเป็นเหล่านี้ ดังนั้นเอฟเฟกต์ภาพเคลื่อนไหวการเปลี่ยนแปลงจะหายไปเมื่อใช้เบราว์เซอร์ทั้งสอง นอกจากนี้ Bootstrap ไม่ได้ตั้งใจที่จะใช้ฟังก์ชั่นทางเลือกที่ใช้ jQuery
ตัวเลือกเสริม
ใน. item ใด ๆ คุณสามารถเพิ่ม. carousel-caption ลงในแต่ละสไลด์ นอกจากนี้คุณยังสามารถเพิ่มรหัส HTML ใด ๆ ซึ่งจะจัดเรียงและจัดรูปแบบโดยอัตโนมัติ
<div> <img>/img> <div> <h4> ฉลากรูปย่อแรก </h4> <p> cras justo odio, dapibus ac facilisis ใน egestas eget Quam donec id elit non mi porta gravida ที่ eget metus nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div>
เพิ่มสามรายการจากนั้นเอฟเฟกต์จะได้รับการจัดอันดับ
ปัญหาการเข้าถึง
ส่วนประกอบม้าหมุนไม่สามารถใช้งานได้กับมาตรฐานการเข้าถึง หากจำเป็นต้องใช้ความเข้ากันได้ให้พิจารณาตัวเลือกอื่น ๆ สำหรับการนำเสนอสไลด์
การใช้งานผ่านคุณลักษณะข้อมูล
แอตทริบิวต์ข้อมูลสามารถควบคุมตำแหน่งของม้าหมุนได้อย่างง่ายดาย สไลด์ข้อมูลสามารถยอมรับคำหลักก่อนหน้าหรือคำหลักถัดไปที่ควบคุมตำแหน่งการเล่น นอกจากนี้ตัวห้อยสไลด์ที่เริ่มต้นด้วย 0 ยังสามารถส่งผ่านข้อมูลสไลด์ไปยัง
แอตทริบิวต์ data-ride = "Carousel" ใช้เพื่อทำเครื่องหมายส่วนประกอบม้าหมุนที่เริ่มต้นหลังจากโหลดหน้าเว็บ
เพิ่มในภาชนะหมุนรอบนอกสุด
<div id = "carousel-example-generic" data-ride = "Carousel">
ผ่าน JavaScript
เริ่มต้นส่วนประกอบม้าหมุนด้วยตนเอง (ด้านบนเราจะเปิดส่วนประกอบม้าหมุนโดยอัตโนมัติโดยใช้คุณสมบัติการขับขี่ข้อมูล)::
$ ('. Carousel'). Carousel ()
ตัวเลือก
ตัวเลือกสามารถส่งผ่านคุณสมบัติข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลคุณต้องใส่ชื่อตัวเลือกหลังจาก data- ตัวอย่างเช่น data-interval = ""
วิธี
$ ("") Carousel (ตัวเลือก)
เริ่มต้นส่วนประกอบ Carousel ยอมรับพารามิเตอร์ตัวเลือกประเภทวัตถุเสริมและเริ่มลูปสไลด์
$ ('. Carousel'). Carousel ({Interval: 2000}).Carousel ('รอบ') วนแต่ละเฟรมจากซ้ายไปขวา
.Carousel ('หยุดชั่วคราว') หยุดม้าหมุน
.Carousel (หมายเลข) วางตำแหน่งม้าหมุนไปยังเฟรมที่ระบุ (เฟรมตัวห้อยเริ่มต้นด้วย 0 คล้ายกับอาร์เรย์)
.Carousel ('prev') กลับไปที่เฟรมก่อนหน้า
.Carousel ('ถัดไป') ไปที่เฟรมถัดไป
เหตุการณ์
ส่วนประกอบม้าหมุนของ Bootstrap เปิดเผยสองเหตุการณ์สำหรับการฟัง
$ ('#carousel-example-generic') บน ('slide.bs.carousel', function () {Alert (1);})สิ่งนี้ผูกมัดเหตุการณ์กับส่วนประกอบม้าหมุนแล้วดำเนินการพวกเขาที่รันไทม์ที่สอดคล้องกัน สิ่งนี้อธิบายได้มากมายในปลั๊กอิน JavaScript ก่อนหน้านี้และแบบฟอร์มทั้งหมดเป็นเรื่องทั่วไปดังนั้นคุณสามารถใช้มันได้
รูปภาพ
เหล่านี้เป็นปลั๊กอินม้าหมุนที่ใช้งานได้จริงอีกหลายรายการซึ่งมีผลลัพธ์ที่ดีมาก หากใช้อย่างสมเหตุสมผลพวกเขาจะเพิ่มคะแนนในหน้าของคุณเสมอ ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน
หากคุณไม่พอใจคุณสามารถตรวจสอบบทความเหล่านี้สำหรับการศึกษาเชิงลึก: บรรณาธิการของ "การสอนการเรียนรู้ bootstrap" ทำให้คุณก้าวหน้าไปกับคุณ!
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบสองหัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น