ด้วยความหลากหลายของ Carousels ออกมีจำนวนมากสำหรับ Mootools เช่นกันก็ยังตัดสินใจที่จะเขียนระดับ Carousel ของตัวเองด้วยเหตุผลที่ดีบางอย่าง
1 เรื่องคุณสมบัติเพจจิ้ง (เพื่อให้สามารถที่จะกระโดดภาพนิ่งเฉพาะ / ขั้นตอนในม้าหมุน)
2 เรื่องเสรีภาพกับตำแหน่งของปุ่มซ้ายและขวา / ลิงค์ที่เคยฉันโปรด
3 การควบคุมที่มากกว่าขั้นตอนการนำเสนอภาพนิ่ง
ฉันไม่จัดการเพื่อสร้าง Carousel ใหม่ที่มีคุณสมบัติข้างต้น ... ดังนี้ ... รู้สึกอิสระที่จะแนะนำการแก้ไขใด ๆ ที่คุณจะต้องมี!
ตัวอย่างของฉันลักษณะเช่นนี้ ... [ Demo ดู ]
ดูการสาธิต | ดาวน์โหลด Mootools Carousel กับเพจเวอร์ชัน 1.0 (Downloaded 2006 ครั้ง)
1 Paging Carousel
คุณสามารถเพิ่มเพจจิ้งที่ม้าหมุนของคุณเพียงโดยการตั้งธงเพจจิ้งซึ่งเป็น parater ล่าสุดผ่านขณะที่การสร้างอินสแตนซ์ของ MooCarousel ไปจริง (เพจจิ้งต้องการ) หรือเท็จ (เพจจิ้งที่ต้องการ donot)
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = จำนวนของภาพนิ่ง, SSS = ขนาดขั้นตอนในภาพนิ่ง
และ ofcourse คุณสามารถเปลี่ยนรูปลักษณ์-n-ความรู้สึกของเหล่า achors เพจจิ้งที่คุณโปรดโดยการปรับเปลี่ยน CSS ของพวกเขา
carousel_paging {text-align: ขวา; ขอบ: 5px 10px 0 0;}.
carousel_paging ปัจจุบันหน้า carousel_paging {เค้าร่าง: ไม่มี; ความกว้าง:.... 15px; ความสูง: 15px; line-height: 15px; ข้อความชิด: ศูนย์; display: block; float: left; พื้นหลัง: # D8D8EB; margin: 0 1px 0 0; ตกแต่งข้อความ: none;}
carousel_paging: โฉบ, carousel_paging ปัจจุบัน {background: # 4D4D9B; color: # FFFFFF;}...
ดี! มีปัญหาเล็ก ๆ แต่ที่โยงเพจจิ้งถ้าตั้งแล้วมันจะได้รับการสร้างเสมอหลังจากส่วนประกอบ Carousel ผมอยากจะให้มันแบบไดนามิกเช่นกัน แต่แล้วเพียงเพื่อให้สคริปสำหรับเป่าออกมาจากสัดส่วนที่ฉันตัดสินใจที่จะข้ามมัน
แต่คุณรู้จาวาสคริน้อยคุณได้อย่างง่ายดายสามารถปรับเปลี่ยนรหัสรุ่นเพจจิ้งในชั้นเรียน MooCarousel เพื่อโปรดความต้องการของคุณ
2 การปรับแต่งไอคอนด้านซ้ายและขวา
คุณสามารถเปลี่ยนภาพหรือตำแหน่งใด ๆ สถานที่ให้บริการ displat จากปุ่มซ้ายและขวาได้ง่ายๆโดยการเล่นรอบกับ CSS เพื่อให้สามารถเปลี่ยนตำแหน่งของ buttoms ซ้ายและขวาคือเหตุผลที่แท้จริงสำหรับฉันไปทางขวาของเราระดับของฉัน Carousel
ตั้งแต่นี้ระดับของ MooCarousel ยอมรับ id สถานที่ของปุ่มเหล่านี้คุณสามารถจริงวางปุ่มเหล่านี้ที่ใดก็ได้บนหน้าถ้าคุณโปรด ... มันไม่ได้ต้องอยู่ในลำดับชั้นขององค์ประกอบดังเช่นในตัวอย่างของฉัน
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
CSS
.. carousel_container_l, carousel_container_r {margin: 50px 0 0 0; ตำแหน่ง: ญาติ; กว้าง: 23px; ความสูง: 20px; float: left;: ชี้;}
carousel_container_r {background-position: 0-38px;}.
. carousel_container_l {background-position: 0-58px;}
3 การปรับแต่งขั้นตอนการนำเสนอภาพนิ่ง
ผมหมายถึงอะไรขั้นตอนการปรับแต่ง MY SLIDE?
Carousels ส่วนใหญ่เต็มรูปแบบสไลด์ที่มีของหน้าต่างที่มองเห็นได้ ดังนั้นว่าคุณมีสี่รายการ (เช่นในตัวอย่างข้างต้น) ก็จะเลื่อนการเดินทางทั้งหมดสี่รายการ ด้วยชิ้นส่วน Carousel นี้คุณผ่านจำนวนของภาพนิ่งและขนาดขั้นตอนที่คุณเลือก
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = จำนวนภาพนิ่ง c_sss = ขนาดขั้นตอนการนำเสนอภาพนิ่ง
นอกจากนี้ใน example1 ของฉันฉันได้ calcuted ขนาดขั้นตอนการนำเสนอภาพนิ่งบนพื้นฐานของตรรกะที่ฉันรู้ว่าจำนวนรายการที่ความกว้างในแต่ละรายการและกำไรที่ได้รับหลังจากแต่ละรายการในของฉัน CSS
/ * สำหรับการดื่มฉลอง 1 * /
var c1_w = 92; กว้างรายการ / การดื่มสุรา /
var c1_n = 10; จำนวน / / รวมรายการการดื่มสุราการเปรียบเทียบ
var c1_pp = จำนวนครั้งที่ 4 / / จากการเปรียบเทียบการดื่มสุรา perpage รายการ
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp / / SSS = ขนาดขั้นตอนการนำเสนอภาพนิ่ง
var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / ns ภาพนิ่ง = จำนวน
c1_sss + = c1_marginFactor / / SSS = ขนาดขั้นตอนภาพนิ่ง, 51 สำหรับระยะขอบ
ที่ต้องการ: Mootools 1.2
ดูการสาธิต | ดาวน์โหลด Mootools Carousel กับเพจเวอร์ชัน 1.0 (Downloaded 2006 ครั้ง)
