ตัวอย่างนี้ให้การวิเคราะห์ที่ครอบคลุมเกี่ยวกับการใช้งานหมุนใน bootstrap สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ไฟล์ซอร์สโค้ด:
carousel.scss
carousel.js
หลักการดำเนินการ:
ซ่อนองค์ประกอบทั้งหมดที่จะแสดงและจากนั้นระบุว่าบล็อกปัจจุบันที่จะแสดงความกว้างและความสูงที่ปรับได้
การวิเคราะห์ซอร์สโค้ด:
1. โครงสร้าง HTML: ส่วนใหญ่แบ่งออกเป็นสี่ส่วน
1.1. คอนเทนเนอร์: div ด้านนอกสุดต้องใช้ data-ride = "Carousel" ที่จะระบุเป็นปลั๊กอินเล่นล้อและให้ ID เพื่ออำนวยความสะดวกในการเชื่อมโยงของตัวบ่งชี้วงกลม
1.2. ส่วนรายการรูปภาพถูกห่อหุ้มด้วย div ด้านนอกจากนั้น IMG แต่ละตัวจะถูกห่อด้วย div และชั้นเรียนถูกห่อหุ้มด้วยรายการ
1.3. ตัวบ่งชี้วงกลม: ใช้รายการ OL เพื่อแสดงรายการกราฟิก รายการแต่ละรายการจำเป็นต้องระบุแอตทริบิวต์ข้อมูลสไลด์-to =” ดัชนี” ซึ่งใช้เพื่อทำเครื่องหมายหมายเลขดัชนีของวงกลมปัจจุบัน
1.4. ปุ่มควบคุมซ้ายและซ้าย: ตระหนักถึงฟังก์ชั่นของการเคลื่อนที่ซ้ายและขวา
2. สไตล์ CSS
2.1. Carousel: มีเครื่องหมายวางตำแหน่งสัมพัทธ์เพียงครั้งเดียว
2.2. Carousel-Inner: หมุนพื้นที่รายการภาพโดยที่แต่ละรายการมีรายการที่จะแก้ไข
2.2.1. แอคทีฟถัดไปและก่อนหน้านี้ถือว่ามองเห็นได้
2.2.2. Carousel-Caption: หมายความว่าแต่ละรายการควรมีข้อมูลชื่อเรื่องและตำแหน่งเริ่มต้นจะปรากฏขึ้น
2.3. Carousel-Control: กำหนดรูปแบบของปุ่มซ้ายและขวาซึ่งจะตั้งค่าข้อมูลเช่นการไล่ระดับสีและความโปร่งใส มันมีสองรูปแบบเพิ่มเติม: Icon-PREV และ ICON-NEXT
2.4. Carousel-Indicators: รูปแบบส่วนของวงกลมอยู่ในตำแหน่งที่แน่นอน LI แต่ละตัวถูกตั้งค่าเป็นองค์ประกอบบล็อกแบบอินไลน์ ใช้ Text-Indent: -999 เพื่อซ่อนตัวอักษร
3. รหัส JS
3.1. วิธีหลักหลักคือสไลด์ซึ่งตระหนักถึงการสลับรูปภาพ
3.1.1. เมื่อสวิตช์ภาพดำเนินการครั้งแรกวิธีการหยุดชั่วคราวจะถูกเรียกให้ตั้งค่าตัวจับเวลาอย่างไม่แน่นอน หลังจากสวิตช์รูปภาพเสร็จสมบูรณ์แล้วจะมีการเรียกใช้วิธีการรอบเพื่อเปิดใช้งานตัวจับเวลา
3.1.2. ยอมรับสองพารามิเตอร์: พิมพ์และถัดไป
3.1.2.1 ประเภท: หมายถึงการเปลี่ยนหน้าขึ้นหรือลง
3.1.2.2 ถัดไป: คราวนี้จะแสดงเป็นรายการที่ใช้งานอยู่ หากไม่ได้ผ่านเข้ามาคุณจะต้องใช้วิธี getItemFordirection เพื่อรับ
3.1.3. รับพารามิเตอร์พื้นฐานเช่น $ active (รายการที่ใช้งานอยู่ในปัจจุบัน), $ ถัดไป (รายการที่ต้องเป็นรายการที่ใช้งานอยู่), isCycling (จับตัวจับเวลาสำหรับ Timer Carousel), ทิศทาง (ทิศทาง) และพารามิเตอร์พื้นฐานอื่น ๆ
3.1.4 จากนั้นเรียกเหตุการณ์ Slide.bs.carousel
3.1.5. จากนั้นตั้งค่ารายการดัชนีของตัวบ่งชี้
3.1.6. สลับรูปภาพ หากคุณสนับสนุนภาพเคลื่อนไหว CSS ให้ใช้แอนิเมชั่นเพื่อสลับ มิฉะนั้นเพิ่ม CSS โดยตรงเพื่อสลับ
3.1.7. หลักการเปลี่ยนภาพเคลื่อนไหว:
3.1.7.1 ก่อนหน้า: มันเป็นสไตล์ที่จะรวมกันโดยการเลื่อนรูปภาพไปทางขวา: Active Right (Active Item) ขวาก่อนหน้า (รายการถัดไป) ในเวลานี้ Prev เองคือ -100%วางรูปภาพไปทางซ้ายสุด
3.1.7.2 ถัดไป: เลื่อนภาพไปทางซ้ายและซ้ายถัดไป (รายการถัดไป) ในเวลานี้ถัดไปคือ 100%วางภาพไปทางขวาสุด
3.1.7.3 ถูกต้อง: ภาพควรอยู่ทางขวาดังนั้นควรเลื่อน 100% ของความกว้างของภาพ
3.1.7.4 Active Left: ภาพอยู่ทางซ้ายจากนั้นความกว้างของภาพควรเรียกใช้ -100%
3.1.7.5 ภาพเปรียบเทียบ:
3.1.8. รหัสการใช้งาน (ไม่รวม CSS3):
.carousel-inner> .active, .carousel-inner> .next, .carousel-inner> .prev {display: block;}. carousel-inner> .active {ซ้าย: 0;}. carousel-inner> .next, .carousel-inner> .prev {ตำแหน่ง: Absolute; ด้านบน: 0; ความกว้าง: 100%;}. carousel-inner> .next {ซ้าย: 100%;}. carousel-inner> .prev {ซ้าย: -100%;}. carousel-inner> .next.left, .carousel-inner> .prev.right {ซ้าย: 0; {ซ้าย: 100%;}หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
การแบ่งปันหัวข้อที่ยอดเยี่ยม: ภาพ jQuery Carousel JavaScript รูปภาพ Carousel Bootstrap Picture Carousel
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript