เอฟเฟกต์ม้าหมุนสามารถเห็นได้ในเว็บและหลายคนก็เรียกมันว่าสไลด์โชว์ เอฟเฟกต์หลักของการแสดงผลคือการเล่นหลายภาพในรอบการเล่นจากขวาไปซ้าย การเล่นมันจะหยุดชั่วคราวเมื่อเมาส์วนเวียนอยู่เหนือภาพ หากเมาส์ลอยอยู่เหนือหรือคลิกจุดที่มุมล่างขวาภาพที่เกี่ยวข้องจะปรากฏขึ้น
เอฟเฟกต์ม้าหมุนภาพนี้ถูกนำไปใช้ในเฟรมเวิร์กบูตสแตรปผ่านปลั๊กอินม้าหมุน
ภาพหน้าจอของเอฟเฟกต์การสาธิต:
รหัส:
<! doctype html> <html> <head> <meta charset = "utf-8"> <!-<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3 href = "css/bootstrap.min.css"/> <style> body {padding: 10px; margin: 10px;} </style> </head> <body> <div id = "mycarousel"> <! -> <!-เลเยอร์ #Slidershow เพิ่มสไตล์สไลด์และใช้รูปภาพและรูปภาพเพื่อสลับเอฟเฟกต์เพื่อให้ราบรื่น-> <ol> <!-ขั้นตอนที่ 2: ออกแบบเคาน์เตอร์รูปภาพม้าหมุน -> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </li> <li data-target = "#mycarousel" data-slide-slide-to = "2" สไตล์ Carousel-inner ในการควบคุม-> <div> <img src = "http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"> <d4> <h4> ชื่อ 1 </h4> <p> src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> ชื่อ 2/h4> <p> ภาพ 2 </p> </div> src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> <div> <h4> ชื่อ 2/h4> <p> ภาพ 2 </p> </div> src = "http://images3.c-ctrip.com/rk/201403/yfdd580145a.png"> <div> <h4> ชื่อเรื่องที่สาม </h4> <p> บทนำเนื้อหาของภาพสาม </p> เล่นการควบคุมม้าหมุนด้านซ้ายไปข้างหน้าและคอนโทรลเลอร์ที่เล่นย้อนหลัง-> <a href = "#mycarousel" data-slide = "prev"> ‹<!-<a href = "#slidershow" role = "ปุ่มสลิด ๆ " data-slide = "next"> <span> </span> <!-<a href = "#carousel-example-generic" data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <span> </span> </a>-> </div> <script> $ ('. Carousel'). Carousel () </script> <script type = "text/javascript" src = "js/jQuery.min.js"> </script> src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js" src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html> /*การวางตำแหน่งสัมบูรณ์ของพื้นที่นับทั้งหมด*/ด้านล่าง: 10px; /*10px จากด้านล่างของม้าหมุนคอนเทนเนอร์*/z-index: 15; /*ตั้งค่าระดับบนแกน z*//*กลางพื้นที่การนับทั้งหมดที่ระดับ*/ซ้าย: 50%; ความกว้าง: 60%; การเลื่อน-ซ้าย: 0; ระยะขอบซ้าย: -30%; text-allign: center; style: 10px; -999px; เคอร์เซอร์: ตัวชี้; พื้นหลังสี: #000/9; พื้นหลังสี: rgba (0, 0, 0, 0); ชายแดน: 1px ของแข็ง #FFF; เส้นขอบ-radius: 10px;}/*ตั้งค่าสถานะปัจจุบัน*/. carousel-indicators.Picture Carousel-การเล่นของ Touch Touch Carousel
มีสองวิธีในการเรียกใช้แผนภาพม้าหมุนหนึ่งคือการประกาศและอีกวิธีหนึ่งคือ JavaScript ก่อนอื่นมาดูวิธีการประกาศ
วิธีการประกาศถูกนำมาใช้โดยการกำหนดแอตทริบิวต์ข้อมูลซึ่งสามารถควบคุมตำแหน่งของม้าหมุนได้อย่างง่ายดาย ส่วนใหญ่มีประเภทต่อไปนี้:
•คุณสมบัติการขับขี่ข้อมูล: ใช้ค่าหมุนและกำหนดไว้ในม้าหมุน
•คุณสมบัติข้อมูลเป้าหมาย: ใช้ชื่อ ID หรือตัวระบุสไตล์อื่น ๆ ที่กำหนดโดยค่าม้าหมุน ดังที่แสดงในตัวอย่างก่อนหน้าใช้ค่า "#slidershow" และกำหนดไว้ในแต่ละ li ของเคาน์เตอร์หมุน
•แอตทริบิวต์ข้อมูลสไลด์: ค่ารวมถึงก่อนหน้า, ถัดไป, ก่อนหน้านี้หมายถึงการเลื่อนย้อนกลับและถัดไปหมายถึงการเลื่อนไปข้างหน้า ค่าคุณสมบัตินี้ยังถูกกำหนดไว้ในลิงค์ A ของคอนโทรลเลอร์ Carousel และค่า HREF คอนโทรลเลอร์ถูกตั้งค่าเป็นชื่อ ID หรือตัวระบุสไตล์อื่น ๆ ของม้าหมุนคอนเทนเนอร์
•แอตทริบิวต์ข้อมูลสไลด์ถึง: ใช้เพื่อผ่านตัวห้อยของเฟรมบางเฟรมเช่นข้อมูลสไลด์ไปที่ = "2" ซึ่งสามารถเปลี่ยนเส้นทางไปยังเฟรมที่ระบุนี้ได้โดยตรง (ตัวห้อยเริ่มต้นจาก 0) และยังถูกกำหนดไว้ในแต่ละ LI ของตัวนับม้าหมุน
นอกเหนือจาก Data-Ride = "Carousel", Data Slide และ Data-Slide-Slide-to แล้วส่วนประกอบ Carousel ยังรองรับคุณสมบัติที่กำหนดเองอีกสามประการ:
| ชื่อแอตทริบิวต์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
| ข้อมูล | ตัวเลข | 5,000 | เวลารอ (มิลลิวินาที) สำหรับการหมุนสไลด์ หากเท็จม้าหมุนจะไม่เริ่มวนรอบโดยอัตโนมัติ |
| ข้อมูลหยุดชั่วคราว | สาย | โฉบ | เมาส์เริ่มต้นจะถูกระงับในพื้นที่สไลด์และการเล่นจะเริ่มขึ้นเมื่อออกไป |
| การห่อข้อมูล | ค่าบูลีน | จริง | เป็นห่วงอย่างต่อเนื่องม้าหมุน |
รหัสต่อไปนี้ใช้ "Carousel ไม่วนเวียนอย่างต่อเนื่อง" และ "ช่วงเวลาของม้าหมุนคือ 1 วินาที"
<div id = "slidershow" data-ride = "Carousel" data-wrap = "false" data-interval = "1000"> ...... </div>
คุณลักษณะสามประการข้างต้นสามารถกำหนดได้ในองค์ประกอบคอนเทนเนอร์หรือตัวระบุ (หรือลิงก์ควบคุมซ้ายและขวา) แต่คำจำกัดความหลังมีลำดับความสำคัญสูงกว่า
Image Carousel-Javascript Trigger Method
คำแถลงสามคำสั่ง data-ride = "Carousel" และ data-slide = "prev" และ data-slide = "ถัดไป" ถูกลบออก ลองใช้รหัส JS เพื่อใช้ฟังก์ชั่นของ "Carousel Picture Picture" และ "ไปข้างหน้าและย้อนกลับปุ่ม"
ใช้ JS เพื่อใช้ฟังก์ชั่นของ "Picture Picture Carousel" และ "ไปข้างหน้าและย้อนกลับปุ่ม"
โดยค่าเริ่มต้นหากแอตทริบิวต์ data-ride = "Carousel" ถูกกำหนดไว้ในคอนเทนเนอร์ Carousel เอฟเฟกต์การสลับภาพม้าหมุนจะถูกโหลดโดยอัตโนมัติหลังจากโหลดหน้าเว็บ หากไม่ได้กำหนดแอตทริบิวต์ข้อมูล Ride การสลับภาพม้าหมุนสามารถเรียกใช้ผ่านวิธี JavaScript วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
$ (". Carousel"). Carousel ();
นอกจากนี้คุณยังสามารถระบุได้ด้วย ID คอนเทนเนอร์:
การคัดลอกรหัสมีดังนี้:
$ ("#slidershow"). Carousel ();
พารามิเตอร์เฉพาะสามารถตั้งค่าในวิธี carousel () เช่น:
| ชื่อแอตทริบิวต์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
| ช่วงเวลา | ตัวเลข | 5,000 | เวลารอ (มิลลิวินาที) สำหรับการหมุนสไลด์ หากเท็จม้าหมุนจะไม่เริ่มวนรอบโดยอัตโนมัติ |
| หยุดชั่วคราว | สาย | โฉบ | เมาส์เริ่มต้นจะถูกระงับในพื้นที่สไลด์และการเล่นจะเริ่มขึ้นเมื่อออกไป |
| ห่อ | ค่าบูลีน | จริง | เป็นห่วงอย่างต่อเนื่องม้าหมุน |
เมื่อใช้งานคุณสามารถผ่านพารามิเตอร์ที่เกี่ยวข้องของสถานะเมื่อเริ่มต้นปลั๊กอินเช่น:
$ ("#slidershow"). Carousel ({Interval: 3000});ในความเป็นจริงเมื่อเรากำหนดค่าพารามิเตอร์สำหรับวิธี Carousel () เอฟเฟกต์ม้าหมุนสามารถเปลี่ยนได้โดยอัตโนมัติ อย่างไรก็ตามปลั๊กอิน Carousel ในเฟรมเวิร์ก Bootstrap ยังให้วิธีการโทรพิเศษหลายอย่างแก่ผู้ใช้ดังนี้:
• .Carousel ("รอบ"): เล่นจากซ้ายไปขวา;
• .carousel ("หยุดชั่วคราว"): หยุดการเล่นลูป;
• .carousel ("หมายเลข"): วนไปยังเฟรมที่ระบุตัวห้อยเริ่มต้นจาก 0 คล้ายกับอาร์เรย์;
• .Carousel ("prev"): กลับไปที่เฟรมก่อนหน้า;
• .Carousel ("ถัดไป"): เฟรมถัดไป
ตัวอย่างเช่นวิธีการโทรก่อนหน้าปุ่มไปข้างหน้าและด้านหลังไม่สามารถทำงานได้อย่างถูกต้อง ในความเป็นจริงพวกเขาสามารถใช้ในการทำงานตามปกติผ่านวิธี. carousel ("prev") และ. carousel ("ถัดไป") รหัสมีดังนี้:
$ (function () {$ ("#slidershow"). Carousel ({Interval: 2000}); $ ("#slidershow a.left") คลิก (ฟังก์ชั่น () {$ ("Carousel") Carousel ("prev");}); $ ("#slidershow A. right "). คลิก (ฟังก์ชั่น () {$ (". Carousel "). Carousel (" Next ");});}); <! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3 10px;} </style> </head> <body> <div id = "carousel- ตัวอย่าง" data-ride = "Carousel"> <!-ตัวบ่งชี้-> <ol> <li data-target = "#carousel-example-slide-to =" 0 "> </li> data-target = "#carousel-example" data slide-to = "1"> </li> <li data-target = "#carousel- ตัวอย่าง" data-slide-to = "1"> </li> <li data-target = "#carousel-example" slide-slide-to = "2" src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home5.jpg" /><div> src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home2.jpg" /><div> src = "http://bfsu.sinaapp.com/wp-content/themes/bfsu/i/homepix/home3.jpg" /><div>...</div></div><!- ตัวควบคุม-> <a href = "#carousel-example href = "#carousel-example" datalide = "next"> <span> </span> </a> </div> <!-<Script> $ (function () {$ ('. Carousel') Carousel ();}) src = "js/bootstrap.min.js"> </script> <!-<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js" src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>-> </body> </html>Wulin.com แนะนำหัวข้อที่เกี่ยวข้องกับ bootstrap:
ทักษะการใช้งานส่วนประกอบ bootstrap
สรุปความรู้ที่เกี่ยวข้องกับ bootstrap
ข้างต้นเป็นคำอธิบายโดยละเอียดของตัวอย่างการใช้งานของแผนภาพการหมุนรอบบู๊ตสแตรปที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!