มาดูเอฟเฟกต์ Bootstrap Picture Picture: Effect:
ข้างต้นคือเอฟเฟกต์ที่แบ่งปันโดยทุกคน แต่นี่คือหน้าแรกของเพลงคลาวด์ Netease
อย่าลืมปรากฏตัวครั้งแรกในห้องสมุดควบคุมอย่างเป็นทางการของ iOS7 และ Android ยังเพิ่มมุมมองนี้ในเวอร์ชันที่แน่นอน การออกแบบเป็นสากล .. Bootstrap3 ยังรองรับการใช้เอฟเฟกต์ดังกล่าวในเว็บ
ถัดไปการวิเคราะห์อย่างง่าย:
1. การวิเคราะห์โครงสร้าง
ภาพม้าหมุนส่วนใหญ่ประกอบด้วยสามส่วน:
☑ภาพม้าหมุน
☑เคาน์เตอร์สำหรับภาพม้าหมุน
☑คอนโทรลเลอร์สำหรับภาพม้าหมุน
ขั้นตอนที่ 1: ออกแบบภาชนะสำหรับภาพม้าหมุน รูปแบบม้าหมุนถูกนำมาใช้ในเฟรมเวิร์ก Bootstrap และค่า ID ถูกกำหนดไว้สำหรับคอนเทนเนอร์นี้เพื่อให้แอตทริบิวต์ข้อมูลถูกใช้เพื่อประกาศทริกเกอร์ในภายหลัง
คัดลอกรหัสดังนี้: <div id = "slidershow"> </div>
ขั้นตอนที่ 2: ออกแบบเคาน์เตอร์รูปภาพม้าหมุน เพิ่มเครื่องคิดเลขรูปภาพม้าหมุนภายในคอนเทนเนอร์ div.carousel โดยใช้สไตล์ Carousel-Indicators ฟังก์ชั่นหลักของมันคือการแสดงลำดับการเล่นของรูปภาพปัจจุบัน (มีหลายรูปภาพและต่อไปนี้เป็นรายการเดียวกันโดยทั่วไปจะใช้เพื่อสร้าง:
<div id = "slidershow"> <!-ตั้งค่าลำดับของม้าหมุนภาพ-> <ol> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol>
ขั้นตอนที่ 3: ออกแบบพื้นที่เล่นภาพม้าหมุน ในเอฟเฟกต์ทั้งหมดของภาพม้าหมุนพื้นที่เล่นเป็นพื้นที่ที่สำคัญที่สุดซึ่งส่วนใหญ่ใช้ในการวางรูปภาพที่จำเป็นต้องมีการหมุน พื้นที่นี้ถูกควบคุมโดยใช้สไตล์ม้าหมุนและมันก็ถูกวางไว้ในภาชนะหมุนและภาพม้าหมุนแต่ละภาพจะถูกวางผ่านคอนเทนเนอร์รายการ:
<div id = "slidershow"> <!-ตั้งค่าลำดับของภาพหมุนภาพ-> <ol> <li> 1 </li> … </ol> <!-ตั้งค่าภาพหมุน-> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/20140140140140140 </div> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> src = "http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"> </a> </div> … <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"> </a> </div> </div> </div>
ขั้นตอนที่ 4: ตั้งคำอธิบายภาพม้าหมุน เอฟเฟกต์ภาพม้าหมุนจำนวนมากยังมีชื่อเรื่องและเนื้อหาคำอธิบายในแต่ละภาพ ในความเป็นจริงม้าหมุนในกรอบ bootstrap ยังให้เอฟเฟกต์ที่คล้ายกัน เพียงเพิ่มรหัสที่เกี่ยวข้องที่ด้านล่างของภาพในรายการ
<div id = "slidershow"> <!-ตั้งค่าลำดับของภาพหมุนของรูปภาพ-> <ol> <li> 1 </li> … </ol> <!-ตั้งค่าภาพหมุน-> <div> <a href = "##"> <img src = "http://images3.c-ctrip.com/rk/20140140140140140140 <!-รูปภาพชื่อเรื่องและคำอธิบายที่สอดคล้องกัน-> <div> <h3> ชื่อภาพ </h3> <p> เนื้อหาคำอธิบาย ... </p> </div> </div> … </div> </div>
ขั้นตอนที่ 5: ออกแบบตัวควบคุมรูปภาพ Carousel หลายครั้งที่ภาพ Carousel ยังมีคอนโทรลเลอร์ที่เล่นไปข้างหน้าและย้อนกลับ ใน Carousel สามารถทำได้โดยการรวมซ้ายและขวาเข้ากับสไตล์การควบคุมม้าหมุน ที่ซ้ายหมายถึงการเล่นไปข้างหน้าการเล่นขวาหมายถึงการเล่นย้อนหลัง นอกจากนี้ยังวางไว้ในภาชนะ Carousel:
<div id = "Slidershow"> <!-ตั้งค่าลำดับของม้าหมุนภาพ-> <ol> … </ol> <!-ตั้งค่าภาพหมุน-> <div> … </div> <!-ตั้งค่าคอนโทรลเลอร์ภาพม้าหมุน-> <a href = ""
2. กระบวนการดำเนินการ
<div id = "carousel-example-generic" data-ride = "Carousel"> <!-ตัวบ่งชี้-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> data-target = "#carousel-example-generic" data slide-to = "2"> </li> </ol> <!-wrapper สำหรับสไลด์-> <div role = "listbox"> <div> <img src = "... "> <div> <!-การควบคุม-> <a href = "#carousel-example-generic" role = "button" data-slide = "prev"> <span> </span> <span> ก่อนหน้า </span> </a> <a href = "#carousel-example-generic" role = "data-slide =" next-slide = "
แบ่งออกเป็นสามส่วน
1. ตัวบ่งชี้
ส่วนหนึ่งคือจุดเล็ก ๆ ด้านล่าง ... เป็นตัวบ่งชี้
คลาส OL ใช้เพื่อสร้างตัวบ่งชี้นี้
แต่ละแอตทริบิวต์ข้อมูลสไลด์-to = "0" ใช้เพื่อแนะนำตำแหน่งเพื่อกำหนดสถานะการเปิดใช้งานเริ่มต้น
รายการ
<div> <img src = "... "> <div> <h3> ... </h3> <p> ... </p> </div> </div>
ไม่มีความสงสัยเพียงเติม ชื่อ และ เนื้อหาของ รูปภาพ
2. คอนโทรลเลอร์ซ้ายและซ้าย
รหัสมีดังนี้
<a href = "#mycarousel" role = "ปุ่ม" data-slide = "prev"> <span aria-hidden = "true"> </span> <span> ก่อนหน้า </span> </a> <a href = "#mycarousel" role = "slide-slide =" next "> <
การดำเนินการใน JavaScript
การเริ่มต้น
$ ('. Carousel'). Carousel ({Interval: 2000})ดำเนินการวนรอบ
.Carousel ('รอบ')
หยุดชั่วคราว
.Carousel ('หยุดชั่วคราว')
การวางตำแหน่งไปยังรายการเฉพาะเริ่มตั้งแต่ 0
.Carousel (หมายเลข)
ก่อนหน้านี้
.Carousel ('prev')
ต่อไป
.Carousel ('ถัดไป')
เนื้อหาเพิ่มเติมเกี่ยวกับ bootstrap สามารถพบได้ในหัวข้อพิเศษ: "การสอนการเรียนรู้ bootstrap"
ข้างต้นคือการแนะนำรายละเอียดเกี่ยวกับ JavaScript Picture Carousel ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript