ฉันได้แชร์เอฟเฟกต์ม้าหมุนภาพสามภาพและฉันเชื่อว่ามีสิ่งที่คุณพอใจเสมอ!
เอฟเฟกต์แรก: Bootstrap Simple Carousel
<! doctype html> <html> <head> <head> <title> bootstrap อินสแตนซ์- ปลั๊กอินม้าหมุนง่าย </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "StylesHeet"> src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-ตัวชี้วัด Carousel-> <ol> data-slide-to = "1"> </li> <li data-target = "#mycarousel" datalide-to = "2"> </li> </ol> <!-โครงการ Carousel-> <div> <img src = "/wp-content/uploads/2014/07 src = "/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3 <a href = "#mycarousel" data-slide = "next"> มากกว่า </a> </div> </body> </html>
ประเภทที่สอง: ม้าหมุนที่มีชื่อ (คู่มือ)
<! doctype html> <html> <head> <title> อินสแตนซ์ bootstrap - ชื่อเรื่องของปลั๊กอิน Carousel </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "StylesHeet" src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-ตัวชี้วัด Carousel-> <ol> data-slide-to = "1"> </li> <li data-target = "#mycarousel" datalide-to = "2"> </li> </lu> <!-โครงการ Carousel-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png" src = "/wp-content/uploads/2014/07/slide2.png"> <div> ชื่อ 2 </div> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3.png"> <div> href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> </a> </div> </body> </html>
ประเภทที่สาม: JS Control Automatic Carousel
<! doctype html> <html> <head> <title> bootstrapjs control carousel </title> <link href = "/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet"> src = "/bootstrap/3.0.3/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-ตัวบ่งชี้ Carousel-> <ol> <li data-target = "#myCarousel data-slide-to = "1"> </li> <li data-target = "#mycarousel" datalide-to = "2"> </li> </ol> <!-โครงการ Carousel-> <div> <img src = "/wp-content/uploads/2014/07 src = "/wp-content/uploads/2014/07/slide2.png"> </div> <div> <img src = "/wp-content/uploads/2014/07/slide3 <a href = "#mycarousel" data-slide = "next"> </a> <!-ปุ่มควบคุม-> <div style = "text-align: center;"> <input type = "ปุ่ม" value = "start"> <input = "button =" pause " 1 "> <อินพุต type =" ปุ่ม "value =" Slide 2 "> <input type =" button "value =" Slide 3 "> </div> </div> <script> $ (function () {// เริ่มต้น Carousel $ (" Start-Slide ") คลิก (ฟังก์ชั่น () {$ ("#mycarousel " Carousel $ (". หยุดชั่วคราว") คลิก (ฟังก์ชั่น () {$ ("#mycarousel") carousel ('หยุดชั่วคราว');}); $ (". สไลด์ถัดไป") คลิก (ฟังก์ชั่น () {$ ("#mycarousel") carousel ('next');}); $ ("#mycarousel") Carousel (1);}); }); </script> </body> </html>พารามิเตอร์เฉพาะสามารถตั้งค่าในวิธี carousel () เช่น:
เมื่อใช้งานคุณสามารถผ่านพารามิเตอร์ที่เกี่ยวข้องของสถานะเมื่อเริ่มต้นปลั๊กอินเช่น:
$ ("#slidershow"). Carousel ({Interval: 3000});ปลั๊กอิน Carousel ในเฟรมเวิร์ก Bootstrap ยังช่วยให้ผู้ใช้มีวิธีการโทรพิเศษหลายวิธีดังนี้:
.Carousel ("รอบ"): เล่นจากซ้ายไปขวา;
.Carousel ("หยุดชั่วคราว"): หยุดการเล่นลูป;
.Carousel ("หมายเลข"): ลูปไปยังเฟรมที่ระบุตัวห้อยเริ่มต้นจาก 0 คล้ายกับอาร์เรย์;
.Carousel ("prev"): กลับไปที่เฟรมก่อนหน้า;
.Carousel ("ถัดไป"): เฟรมถัดไป
ใช้แอตทริบิวต์ข้อมูลเพื่อควบคุมม้าหมุน:
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - วิธีการปลั๊กอิน Carousel </title> <link href = "http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js" data-wrap = "true" data-interval = "1000"> <!-ตัวบ่งชี้ Carousel-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-tatarget = "#mycarousel" slide-slide-to = "1" data-slide-to = "2"> </li> </ol> <!-โครงการ Carousel-> <div> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> </div> src = "/wp-content/uploads/2014/07/slide3.png"> </div> </div> <!-การนำทางม้าหมุน-> <a href = "#mycarousel" data-slide = "prev"> style = "text-allign: center;"> <input type = "button" value = "start"> <input type = "button" value = "Pause"> <input type = "button" value = "slide ก่อนหน้า"> <input type = "ปุ่ม" value = "slide next"> </div> </div> </body> </html>
วิธีการประกาศถูกนำมาใช้โดยการกำหนดแอตทริบิวต์ข้อมูลซึ่งสามารถควบคุมตำแหน่งของม้าหมุนได้อย่างง่ายดาย ส่วนใหญ่มีประเภทต่อไปนี้:
1. คุณสมบัติการขับขี่ข้อมูล: ใช้ค่าหมุนและกำหนดไว้ในม้าหมุน
2. คุณสมบัติข้อมูลเป้าหมาย: ใช้ชื่อ ID หรือตัวระบุสไตล์อื่น ๆ ที่กำหนดโดยค่าม้าหมุน ดังที่แสดงในตัวอย่างก่อนหน้าใช้ค่าเป็น "#slidershow" และกำหนดไว้ในแต่ละ li ของเคาน์เตอร์หมุน
3. แอตทริบิวต์ข้อมูลสไลด์: ค่ารวมถึงก่อนหน้า, ถัดไป, ก่อนหน้านี้หมายถึงการเลื่อนย้อนกลับและหมายถึงการเลื่อนไปข้างหน้า ค่าคุณสมบัตินี้ยังถูกกำหนดไว้ในลิงก์ A ของคอนโทรลเลอร์ Carousel และค่า HREF คอนโทรลเลอร์ถูกตั้งค่าเป็นชื่อ ID หรือตัวระบุสไตล์อื่น ๆ ของคอนเทนเนอร์ 4. Carousel
5. แอตทริบิวต์ข้อมูลสไลด์-ถึง: ใช้เพื่อผ่านตัวห้อยของเฟรมบางเฟรมเช่นข้อมูลสล็อตถึง = "2" ซึ่งสามารถเปลี่ยนเส้นทางไปยังเฟรมที่ระบุนี้ได้โดยตรง
ที่นี่คุณต้องทราบว่าคุณสามารถเพิ่มสไตล์สไลด์ลงในเลเยอร์ #Slidershow และใช้เอฟเฟกต์ภาพและภาพสลับภาพให้ราบรื่น
<div id = "slidershow" data-ride = "Carousel"> ... </div>
นอกเหนือจาก Data-Ride = "Carousel", Data Slide และ Data-Slide-Slide-to แล้วส่วนประกอบ Carousel ยังรองรับคุณสมบัติที่กำหนดเองอีกสามประการ:
รหัสต่อไปนี้ใช้ "Carousel ไม่วนเวียนอย่างต่อเนื่อง" และ "ช่วงเวลาของม้าหมุนคือ 1 วินาที"
<div id = "slidershow" data-ride = "Carousel" data-wrap = "false" data-interval = "1000"> .... </div>
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานตาราง bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
การแบ่งปันหัวข้อที่ยอดเยี่ยม: ภาพ jQuery Carousel JavaScript รูปภาพ Carousel Bootstrap Picture Carousel
ข้างต้นคือการแนะนำรายละเอียดเกี่ยวกับ JavaScript Picture Carousel ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript