เนื้อหาหลักของบทความนี้คือการสร้างภาพม้าหมุนด้านล่างแถบการนำทางเพื่อเล่นข่าวสำคัญล่าสุดโดยอัตโนมัติสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. ไดอะแกรมม้าหมุนตอบสนอง
// ไดอะแกรมม้าหมุนตอบสนอง
<div id = "mycarousel"> <ol> <li data-target = "#mycarousel" data slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </li> style = "พื้นหลัง:#223240;"> <a href = "#"> <img src = "img/slide1.png"> </a> </div> <div style = "พื้นหลัง:#f5e4dc;"> <a href = "#"> <img src = "img/slide2.png"> style = "background:#de2a2d;"> <a href = "#"> <img src = "img/slide3.png"> </a> </div> </div> <a href = "#mycarousel" data-slide = "prev">
// การควบคุม jQuery ที่จำเป็น
$ ('#mycarousel') Carousel ({// ตั้งค่าการเล่นอัตโนมัติ/2 วินาทีช่วงเวลา: 3000,});// ปรับตำแหน่งลูกศรม้าหมุน
$ ('. carousel-inner img'). eq (1) .Height () || $ ('. carousel-inner img'). eq (1) .Height () || $ ('. carousel-inner img'). eq (2) .Height (); $ ('. carousel-inner img'). eq (2) .Height (); $ ('. carousel-inner img'). eq (2) .Height (); $ ('. Carousel-Control'). CSS ('Line-Height', $ height + 'Px');});// จำเป็นต้องใช้ CSS
A: โฟกัส {โครงร่าง: ไม่มี;}. navbar-brand {padding: 0;}#mycarousel {margin: 50px 0 0 0;}. carousel-inner .item img {margin: 0 auto;}. carousel-control {font-size: 100px;หากคุณยังต้องการเรียนรู้อย่างลึก
การแบ่งปันหัวข้อที่ยอดเยี่ยม: ภาพ jQuery Carousel JavaScript รูปภาพ Carousel Bootstrap Picture Carousel
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น