จากผู้แต่ง: แม้จะมีข่าวลือเกี่ยวกับ "ความตาย" ที่ถูกกล่าวหาของหน้าเว็บที่มองเห็นได้โดยไม่ต้องเลื่อนความต้องการสไลเดอร์ที่ดีไม่ได้หายไปทุกที่ ขอให้ซื่อสัตย์อย่างน้อยหนึ่งวินาที - สไลเดอร์เป็นเรื่องสนุก นอกจากนี้ไม่มีอะไรอื่นในทางตรงกันข้ามกับเนื้อหาที่เคลื่อนไหวไม่ก่อให้เกิดผลกระทบของผล "WAU" ตัวเลื่อนทั้งหมดเป็นชุดของสไลด์หลายตัวที่เปลี่ยนแปลงซึ่งกันและกันและมีความจำเป็นที่รหัสตัวเลื่อนนั้นง่ายที่สุดเท่าที่จะทำได้ มันอยู่ในกรณีเช่นนี้ว่า jquery จะช่วยเรา
ลองดูที่ 20 JQuery Sliders จากเว็บไซต์ตลาด Envato และคุณจะเข้าใจว่ามีแถบเลื่อนที่เป็นมากกว่าบล็อกที่มีการแทนที่ภาพอย่างราบรื่น
1. RoyalsLIDER - แกลลอรี่ภาพหน้าจอสัมผัสบน jQuery
ตอนนี้ตัวเลื่อน Adaptive ยังเป็นมิตรกับหน้าจอสัมผัส แต่ก็มีความหมายมากกว่าก่อน Royalslider ผสมผสานฟังก์ชั่นทั้งสอง: การปรับตัวและการทำงานกับหน้าจอสัมผัส ตัวเลือกที่ดีเนื่องจากแกลเลอรี่ถูกเขียนบน HTML5 และ CSS3
คุณสมบัติที่น่าสนใจหลายประการ:
วิธีการสร้างเว็บไซต์ด้วยตัวเอง?
การปรับแต่งสูง
มากกว่า 10 เทมเพลตเริ่มต้น
มี Folback สำหรับการเปลี่ยน CSS3
ในความคิดของฉันฟังก์ชั่นที่เจ๋งที่สุดคือ "สถาปัตยกรรมสคริปต์แบบแยกส่วน" ซึ่งช่วยให้คุณตัดการเชื่อมต่อสิ่งที่ไม่จำเป็นออกจากไฟล์ JS หลักซึ่งจะช่วยลดน้ำหนักได้ RoyalsLider, Touchscreen Image Gallery บน jQuery - ตัวเลื่อน JavaScript ที่เชื่อถือได้ซึ่งควรเติมเต็มชุดเครื่องมือของนักพัฒนาใด ๆ
2. Slider Revolution ปลั๊กอิน JQuery Adaptive
ไม่ใช่เรื่องง่ายที่จะทำอะไร "การปฏิวัติ" ด้วยตัวเลื่อน เมื่อพูดถึงสไลด์คุณสามารถเพิ่มฟังก์ชั่นมากมายในนั้น อย่างไรก็ตามการปฏิวัติตัวเลื่อนเป็นความพยายามที่ดีจริงๆ ในบรรดา JQuery Sliders อินสแตนซ์นี้ตรงตามข้อกำหนดที่เป็นไปได้ทั้งหมดของคุณ
รายการของคุณสมบัติตัวเลื่อนมีขนาดใหญ่ดังนั้นฉันจะแสดงรายการเฉพาะที่สุด:
Pararallax Effect และภาพเคลื่อนไหวที่กำหนดเอง
จำนวนเลเยอร์และสไลด์ไม่ จำกัด พร้อมการอ้างอิง
พร้อมใช้งานสไตล์ที่กำหนดเองลึก
และอีกมากมาย
ความสามารถในการเพิ่มเครื่องเล่นวิดีโอที่ฝังตัวและลิงค์จากเครือข่ายสังคมทำให้ Slider Revolution เป็นหนึ่งในตัวเลือกที่ยืดหยุ่นและปรับแต่งได้ในเครือข่าย
3. Slider ปลั๊กอิน JQuery Adaptive Layerslider
โดยชื่อ "Layerslider Adaptive ปลั๊กอิน jquery Slider คุณไม่สามารถชื่นชมตัวเลื่อนนี้ได้จริงๆ
200+ 2D และ 3D การเปลี่ยนผ่านระหว่างสไลด์จัดส่งทุกคน
ฟังก์ชั่นที่โดดเด่นสองสามข้อ:
13 สกินและ 3 ประเภทเมนู
ความสามารถในการวางภาพคงที่เหนือตัวเลื่อน
และ jQuery Fallbek
และอีกมากมาย
เช่นเดียวกับสไลเดอร์ก่อนหน้านี้คุณสามารถเพิ่มเนื้อหาเกือบทุกชนิดแม้แต่เนื้อหามัลติมีเดียที่อยู่อาศัย HTML5 LayerSlider ฟื้นนกสลิงนอกจากนี้ยังสวยงามมาก
4. jQuery แบนเนอร์ rotator / สไลด์โชว์
jQuery Banner Rotator / SlideShow เป็นแถบเลื่อนที่เรียบง่ายที่ไม่เสียสละฟังก์ชั่นหลัก
ความสามารถ:
ข้อเขียน, แทรกข้อความ, ฯลฯ
ตัวอย่างและตัวเลือกต่าง ๆ สำหรับการดูส่วนประกอบ
จับเวลาด้วยความล่าช้าของตัวเลื่อนหนึ่งหรือทั้งหมด
การเปลี่ยนภาพสไลด์ทั้งหมดหรือการเปลี่ยนแปลงที่แตกต่างกันสำหรับแต่ละรายการแยกต่างหาก
jQuery Banner Rotator / SlideShow เมื่อเทียบกับสไลเดอร์ JQuery อื่น ๆ มีความสามารถพื้นฐานเท่านั้น แต่อย่าลืมเกี่ยวกับเรื่องนี้
5. All in One Slider - ปลั๊กอินเลื่อน JQuery แบบปรับได้
แถบเลื่อนใด ๆ ที่ปรากฏบนเครือข่ายมีวิสัยทัศน์ที่เป็นเอกลักษณ์ของตัวเองและแก้ปัญหาใด ๆ ในฟิลด์ แต่ไม่ใช่เรื่องนี้ ทั้งหมดในแถบเลื่อนเดียวสามารถเรียกได้ "รวมทุกอย่าง"
ฉันคิดว่านักพัฒนาเว็บและนักออกแบบส่วนใหญ่มีทางออกที่พิสูจน์แล้ว แต่พวกเขามักจะมองหาสิ่งใหม่ ๆ และ "สิ่งใหม่" นี้รวมถึง:
แบนเนอร์ rotator
แบนเนอร์พร้อมตัวอย่าง
แบนเนอร์พร้อมเพลย์ลิสต์
สไลเดอร์เนื้อหา
ม้าหมุน
สไลเดอร์ทุกประเภทรองรับฟังก์ชั่นส่วนใหญ่ส่วนใหญ่หากไม่ใช่สิ่งที่ต้องการโดย JQuery Sliders ทุกแถบเลื่อนจะกลายเป็น "รวมทั้งหมด" ของคุณหรือไม่
6. Unoslider - Slider หน้าจอสัมผัสแบบปรับได้
หากตัวเลื่อนของคุณไม่ได้ปรับตัวและไม่รองรับหน้าจอสัมผัสคุณมีแถบเลื่อนที่ไม่ถูกต้อง Unoslider เป็นสิ่งที่ถูกต้อง
ตัวเลื่อนนี้พบที่อยู่ภายใต้ดวงอาทิตย์ระหว่างความเรียบง่ายและฟังก์ชั่นที่หลากหลาย ฟังก์ชั่น:
หัวข้อการสนับสนุน
12 หัวข้อสำเร็จรูป
40 การเปลี่ยน
สนับสนุน IE6 + สนับสนุน
ทุกฟังก์ชั่นที่มีอคติในการออกแบบและสไตล์ซึ่งทำให้ Unoslider เป็นแถบเลื่อนเนื้อหาที่ยอดเยี่ยมพร้อมความเป็นไปได้ในการเพิ่มหัวข้อ
7. Master Slider - Slider หน้าจอสัมผัส JQuery
กำลังมองหา "ตัวเลื่อน jquery หนึ่งเพื่อปกครองทุกคน"? ลอง Slider Master Slider - Slider หน้าจอสัมผัส JQuery สำหรับขนาดหน้าจอที่แตกต่างกัน ...
เมื่อพูดถึงการออกแบบที่ดีอินสแตนซ์นี้เป็นหนึ่งในสิ่งที่ดีที่สุด:
มากกว่า 25 เทมเพลต
การเปลี่ยนความเร่งฮาร์ดแวร์
รองรับการสัมผัสและ Svaypov
และอีกมากมาย
การเปลี่ยนแบบโต้ตอบเลเยอร์ภาพเคลื่อนไหวและฮอตสปอตจะดึงดูดความสนใจของคุณอย่างแน่นอน Slider Master - งานศิลปะ
8. TouchCarousel - Scroller เนื้อหา JQuery และ Slider
TouchCarousel ดึงดูดการสนับสนุนและการอัปเดตฟรี อย่างไรก็ตามนี่ไม่ใช่ฟังก์ชั่นทั้งหมดของม้าหมุนประเภทสไลเดอร์ JQuery ที่มีน้ำหนักเบานี้
หากคำว่า "Touch" มีอยู่ในชื่อคุณสามารถเดาได้ว่าตัวเลื่อนมีการปรับตัวอย่างเต็มที่และรองรับการสัมผัส คุณสมบัติอื่น ๆ :
การเพิ่มประสิทธิภาพ SEO
สมาร์ท AVTO เล่น
การเปลี่ยนความเร่งของฮาร์ดแวร์ CSS3
ปรับแต่ง UI และ 4 สกินสำหรับ Photoshop
TouchCarousel เนื่องจากสไลด์สไลด์ทางกายภาพที่เป็นเอกลักษณ์นี่เป็นความรู้สึกใหม่ที่สมบูรณ์บนอุปกรณ์มือถือ
9. Slider ขั้นสูง - Slider JQuery XML
สามารถใช้ Sliders jQuery ไม่เพียง แต่ในเว็บไซต์เท่านั้น พวกเขายังสามารถมีประโยชน์ในการใช้งานเว็บ Slider ขั้นสูงช่วยให้คุณทำ
ด้วย HTML หรือมาร์กอัป XML ตัวเลื่อนขั้นสูงนี้มีความประทับใจที่ไม่สามารถลบได้:
เลเยอร์เคลื่อนไหวและวิดีโอสมาร์ท
การเปลี่ยนมากกว่า 100+ และ 150+ คุณสมบัติที่กำหนดเอง
15 สกินสำหรับ Slider, 7 สกินสำหรับ Scrollbar และ Lightbox รองรับในตัว
การนำทางด้วยแป้นพิมพ์รองรับสัมผัสและการปรับแต่งเต็มรูปแบบ
และอีกมากมาย
อย่างไรก็ตามคุณสมบัติที่ดีที่สุดคือ Slider ขั้นสูง - JQuery XML Slider API ซึ่งทำให้ตัวเลือกสไลเดอร์สมบูรณ์แบบสำหรับเว็บแอปพลิเคชันของคุณ
10. สไลเดอร์ JQuery ซูมเข้า / ออกอย่างเต็มที่ตอบสนองอย่างเต็มที่
หนึ่งในสไลเดอร์ JQuery ที่จะทำให้คุณเห็นการสาธิตก่อนที่คุณจะเริ่มอ่านเกี่ยวกับความสามารถของมัน คุณเพียงต้องการที่จะเข้าใจว่า "การซูมเข้า / ออก" หมายถึงอะไร
เอฟเฟกต์การซูมค่อนข้างอ่อนแอ แต่เพิ่มความรู้สึกของการควบคุมและสัมผัสของภาพในขณะที่แถบเลื่อนแบบคงที่ที่เหลืออยู่ คุณสมบัติพิเศษของ Slider:
การเปลี่ยน CSS3 ระหว่างเลเยอร์
แอนิเมชั่นพารามิเตอร์สำหรับเลเยอร์
ตัวเลือกความกว้างคงที่หน้าจอเต็มรูปแบบและความกว้างทั้งหมด
ข้อความเคลื่อนไหวด้วยการจัดรูปแบบ HTML และ CSS
สไลเดอร์ส่วนใหญ่พยายามจินตนาการถึงเอฟเฟกต์มากที่สุดเท่าที่จะเป็นไปได้และในการซูมเข้า / ออก Slider JQuery ตอบสนองอย่างเต็มที่มีเพียงผลกระทบของ Ken Burns แต่ใช้งานได้ดี
11. วิวัฒนาการของ JQuery Carousel
เช่นเดียวกับ Slider ขั้นสูงด้านบน - Slider JQuery XML วิวัฒนาการ JQuery Carousel มี API ของตัวเองซึ่งสามารถใช้เพื่อปรับปรุงการทำงานหรือการรวมตัวของแถบเลื่อนในโครงการอื่น
วิธีการสร้างเว็บไซต์ด้วยตัวเอง?
ต้องใช้เทคโนโลยีและความรู้ใดในวันนี้เพื่อสร้างเว็บไซต์ด้วยตัวเอง ค้นหาในความเข้มข้น!
ด้วยรูปภาพมาร์กอัป HTML วิดีโอ YouTube และ Vimeo คุณจะได้รับ:
การเพิ่มประสิทธิภาพ SEO
ม้าหมุน 9 รูปแบบ
ผลของเฉดสีและการสะท้อน
ขนาดภาพสามารถกำหนดค่าเป็นด้านหน้าและด้านหลัง
jQuery Carousel Evolution เป็นม้าหมุนที่เรียบง่ายพร้อมตัวเลือกการใช้งานจำนวนมาก
12. สไลเดอร์เซ็กซี่
สไลเดอร์เซ็กซี่ไม่เซ็กซี่เหมือนเดิม อย่างไรก็ตามเนื่องจากอายุของสไลเดอร์นี้สมควรได้รับความมั่นใจ
ในตอนแรกเลื่อนตัวเลื่อนไม่น่าประทับใจมาก แต่ถ้ามันมีการกำหนดค่าอย่างดีเขาจะพอดีกับการออกแบบของคุณอย่างสมบูรณ์แบบ ความสามารถ:
สไลด์ผู้เล่นอัตโนมัติ
ลายเซ็นสำหรับรูปภาพ
สไลด์เล่นต่อเนื่อง
6 ผลการเปลี่ยนแปลง
Sexy Slider กำลังรอให้คุณเปิดพลังทั้งหมดและเปิดเผยศักยภาพ
13. รูปภาพ JQuery & Content Scroll W / Lightbox
ด้วยการออกแบบทั้งหมดเหล่านี้ภายใต้อุปกรณ์มือถือและรองรับหน้าจอประสาทสัมผัสมันเป็นที่น่าพอใจที่ได้เห็นตัวเลื่อน JQuery ที่ไม่ลืม คอมพิวเตอร์ตั้งโต๊ะ.
jQuery Image & Content Scroll W / Lightbox รองรับอินพุตจากแป้นพิมพ์และล้อเลื่อนของเมาส์เช่นเดียวกับคุณสมบัติอื่น ๆ :
แนวนอนและแนวตั้ง
ลายเซ็นข้อความภายในหรือภายนอกตัวเลื่อน
ความสามารถในการตั้งค่าสไลด์ที่เกี่ยวข้องจำนวนหนึ่ง
ภาพในตัว, แฟลช, iframe, ajax และเนื้อหาแบบอินไลน์
นอกจากนี้ในแถบเลื่อนมีกล่องรวมภาพในตัว เป็นทางเลือกคุณไม่สามารถเรียกใช้ Slider เองใน JQuery Image & Content Scroller W / Lightbox แต่เพื่อเปิดใช้งาน Lightbox แยกต่างหาก
14. โปร่งแสง - การปรับแบนเนอร์ Rotator / Slider
สไลเดอร์ JQuery ส่วนใหญ่มีการออกแบบของตัวเอง คุณสามารถกำหนดค่าให้ตัวเองได้ แต่บางครั้งแค่ต้องการทุกอย่างภายในตัวเลื่อน โปร่งแสงนำเสนอต่อความสนใจของคุณ
มีการตั้งค่าจำนวนมากในแถบเลื่อน คุณอาจต้องตั้งค่าบางอย่างและนั่นคือ ความสามารถ:
6 รูปแบบที่แตกต่างกัน
4 ผลของการเปลี่ยน
2 สวอตช์การเปลี่ยน
ปุ่มที่ปรับแต่งได้และลายเซ็น
เช่นเดียวกับคนอื่น ๆ ตัวเลื่อนนี้รองรับการสัมผัสการปรับตัวและมี การเร่งความเร็วฮาร์ดแวร์. Translude เป็นตัวเลื่อนที่มีการออกแบบขั้นต่ำที่เนื้อหานั้นวางไว้บนหัวของมุม
15. FSS - ปลั๊กอินเว็บไซต์เลื่อนแบบเต็มหน้าจอ
คุณต้องการสร้างเว็บไซต์แบบเต็มหน้าจอที่ประกอบด้วยสไลด์หรือไม่? จากนั้นคุณต้องการ FSS
ในความเป็นจริงการใช้ Slider JQuery นี้เป็นเรื่องง่ายมากที่จะสร้างแถบเลื่อนแบบเต็มหน้าจอ ความสามารถ:
รองรับ Ajax
แถบเลื่อน
การสนับสนุนเทคโนโลยีการเชื่อมโยงลึก
2 ผลการเปลี่ยนแปลงที่แตกต่างกัน
นอกจากนี้ยังมีมูลค่าการจ่ายเงินสำหรับการสนับสนุนคีย์บอร์ดและคู่มือหน้า 11 อย่างไรก็ตามความประทับใจในปัจจุบันทำให้น้ำหนักของ FSS มีเพียง 5kb เท่านั้น
16. Zozo Accordion - Slider หน้าจอสัมผัสแบบปรับได้
อีกหนึ่ง ตัวอย่าง jQuery Slider มุ่งเน้นไปที่สไตล์และใครทำตัวให้ดีกับงานของพวกเขา หีบเพลง Zozo เป็นสิ่งจำเป็นสำหรับผู้ที่กำลังมองหาสไลเดอร์ที่ดีพร้อมความสามารถในการเปลี่ยนสไตล์
ความงามนี้มีอนิเมชั่น CSS3 ยังมีฟังก์ชั่นที่หลากหลาย:
หีบเพลงแนวนอนและแนวตั้ง
การเพิ่มประสิทธิภาพ Semantic HTML5 และ SEO
สนับสนุนการสัมผัสแป้นพิมพ์และ Wai-aria
มากกว่า 10 สกินและ 6 เลย์เอาต์
และอีกมากมาย
Zozo Accordion มีการสนับสนุนฟรีและการอัปเดตคงที่รวมถึงฟังก์ชั่นทั้งหมดที่คุณต้องการเห็นในหีบเพลง JQuery
17. ปลั๊กอิน Slider Lonbyone ที่ตอบสนอง jquery
jQuery Responsive Lonbyone Slider Plugin ดูเหมือนภาพเคลื่อนไหวที่เรียบง่ายมากขึ้นไม่ใช่ตัวเลื่อน แทนที่จะแสดงหนึ่งสไลด์ในแต่ละครั้งอินสแตนซ์นี้ทีละขั้นตอนเติมเต็มหน้าจอด้วยสไลด์ในขณะที่ไม่มีสถานที่ในพื้นที่และจากนั้นไปที่สไลด์ถัดไปเท่านั้น
CSS3 Animation ทำงานจาก Under Unition.css มันมีน้ำหนักเบาประกอบด้วยหลายชั้นและเป็นมิตร อุปกรณ์มือถือ. หลายฟังก์ชั่น:
นอกจากนี้ยังมีตัวเลือกการนำทางโดยใช้การลากและวาง ปลั๊กอิน Slider Slider JQuery Responsive ทำงานตาม Twitter Bootstrap Carousel
18. accordionza - ปลั๊กอิน jquery
ไม่มี Slider JQuery ง่ายขึ้นสำหรับสิ่งนี้ ในการทำงานคุณต้องดาวน์โหลด Slider 3KB ทั้งหมดซึ่งทำให้ Slider ประเภท Accorder ที่มีน้ำหนักเบาที่สุด
หากคุณไม่ชอบสามรูปแบบคุณสามารถแก้ไข HTML และ CSS ด้วยตัวคุณเอง ความสามารถ:
การนำทางด้วยแป้นพิมพ์
เอฟเฟกต์และปุ่มง่าย
เทคนิคการปรับปรุงแบบก้าวหน้า - ทำงานได้โดยไม่มี JavaScript
โปรดจำไว้ว่า Accordionza สามารถแสดงตัวเลือกมากมายสำหรับเนื้อหาที่ตลกซึ่งทำให้มีความยืดหยุ่นอย่างมาก
19. MINISYSLIDER - ตัวเลื่อนอเนกประสงค์แบบปรับตัว
MINISYSLIDER เป็นตัวเลื่อนที่ทรงพลังจริงๆ มันสามารถใช้งานได้ไม่เพียง แต่เป็นตัวเลื่อนที่เรียบง่ายของภาพ แต่ยังเป็นแถบเลื่อนทิศทางเดียวแบบเต็มหน้าจอพร้อมการนำทางผ่านรายการเมนู ด้วยคุณสามารถสร้างเว็บไซต์หน้าเดียวที่ยอดเยี่ยม
ภายใต้ประทุนคุณจะพบตัวเลือกมากมาย:
แป้นพิมพ์, เมาส์และการสนับสนุนแบบสัมผัส
การเปลี่ยนความเร่งของฮาร์ดแวร์ CSS3
มาร์กอัปที่ใช้ได้บริสุทธิ์และการเพิ่มประสิทธิภาพ SEO
หมายเลขสไลด์ไม่ จำกัด เลเยอร์สำหรับลายเซ็นและเอฟเฟกต์
API มีพลังมากและเป็นมิตรกับนักพัฒนาซึ่งเปิดขึ้น วิธีการต่าง ๆ การใช้งานของมัน MINISYSLIDER เป็นตัวเลื่อน JQuery แบบก้าวหน้าที่ยอดเยี่ยมพร้อมรหัสที่สะอาดและมีความคิดเห็นที่ดี
20. Slider Parallax - ปลั๊กอิน JQuery แบบปรับได้
Slider Parallax ทำงานได้เช่นปลั๊กอิน Slider OneByone ที่ตอบสนองต่อ JQuery และช่วยให้คุณสามารถเคลื่อนไหวแต่ละชั้นแยกต่างหากภายในหนึ่งสไลด์ คุณสามารถเคลื่อนไหวสไลด์ทั้งหมดหรือแม้แต่คนเดียวโดยการเพิ่มอนิเมชั่น Pararallax
ชุดประกอบด้วยสไลเดอร์ 4 ประเภทที่แตกต่างกันทั้งหมดมีเอฟเฟกต์ Parallax เช่นเดียวกับสไลเดอร์ JQuery อื่น ๆ มันมี:
การปรับแต่งเต็มรูปแบบ
สนับสนุนการสัมผัส
adapiten อย่างเต็มที่จำนวนเลเยอร์ไม่ จำกัด
เล่นอัตโนมัติลูปการปรับความสูงและความกว้างเช่นเดียวกับตัวจับเวลา
เลเยอร์เคลื่อนไหวไม่เพียง แต่เป็นข้อความหรือรูปภาพเท่านั้น คุณยังสามารถเพิ่มวิดีโอ YouTube, Vimeo และ HTML5 Slider Parallax เป็นอีกตัวอย่างที่ดีของวิธีที่คุณสามารถเลียนแบบเอฟเฟกต์แฟลชดีกว่าแฟลชตัวเองซึ่งยังรองรับอุปกรณ์ทั้งหมด
บทสรุป
เป็นเรื่องที่อยากรู้อยากเห็นว่าสไลเดอร์ jQuery เติบโตจากบางสิ่งที่แทนที่ภาพเดียวกับผู้อื่นในชุดเครื่องมือสร้างสรรค์ขนาดใหญ่ ขณะนี้มี 3D, Pararallax Sliders, Sliders สำหรับทั้งหน้า, Adaptive และผู้ที่สามารถดูได้ทั้งบนคอมพิวเตอร์เดสก์ท็อปและบนสมาร์ทโฟน
หากคุณไม่ชอบแถบเลื่อนใด ๆ จากรายการนี้คุณสามารถอ่านบทเรียนการสอนรหัส JQuery บนเว็บไซต์ Envato และพัฒนาบางสิ่งที่ใหม่และไม่เหมือนใคร
หรือดูสไลเดอร์อื่น ๆ ในตลาด Envato - มีอะไรให้เลือก และตัวเลื่อน JQuery ที่คุณชื่นชอบคืออะไรและทำไม?
ในความคิดเห็นพวกเขาเพิ่งถามว่ามีอะไรบ้าง บริการออนไลน์ เพื่อสร้างพวกเขา ในหลักการถ้าโครงการของคุณทำงานกับหนึ่งใน CMS ยอดนิยม (WordPress, Drupal) จะต้องมีปลั๊กอินที่เกี่ยวข้อง แต่จะทำอย่างไรเมื่อเว็บไซต์เขียนบน HTML หรือไม่มีโมดูลที่เหมาะสม? วันนี้ฉันจะบอกคุณเกี่ยวกับตัวเลือกบางอย่างเพื่อแก้ปัญหานี้
โดยทั่วไปวิธีการสร้างสไลเดอร์นั้นแตกต่างกัน ฉันจำได้เมื่อฉันเคยทำงานกับ Typo3 มีโมดูลที่แปลงรูปภาพเป็นแฟลชโดยอัตโนมัติเพื่อแสดงบนเว็บไซต์ นอกจากนี้ยังมีโปรแกรมเดสก์ท็อปพิเศษเพื่อให้แฟลชไดรฟ์ที่คล้ายกันหรือสร้างรหัส HTML + CSS ที่จำเป็น ตอนนี้สไลเดอร์ส่วนใหญ่ใช้งานโดยใช้จาวาสคริปต์และไลบรารีที่เกี่ยวข้องเช่น jQuery และมีสคริปต์ที่แตกต่างกันมาก สองคนจะพิจารณา
- บริการที่ยอดเยี่ยมในการสร้างสไลเดอร์ออนไลน์ คุณไม่จำเป็นต้องเจาะลึกในสคริปต์ใด ๆ การตั้งค่าเกือบทั้งหมดสามารถใช้ได้สำหรับการแก้ไขแบบโต้ตอบ: ขนาดเอฟเฟกต์การนำทาง ฯลฯ คุณเพียงแค่ดาวน์โหลดรูปภาพของคุณเลือกตัวเลือกที่คุณต้องการและดาวน์โหลดรหัส Slider พร้อม ทั้งหมดนี้ฟรี ใน HTML สุดท้ายมีลิงค์ไปที่ บริการนี้แต่ในทางทฤษฎีสามารถลบออกได้ไม่มีลายน้ำเพิ่มเติมในภาพ นักพัฒนาความเคารพ!
comsider
comsider - อีกฟรี เครื่องกำเนิดไฟฟ้าออนไลน์ เลื่อนสำหรับเว็บไซต์ หลักการของงานที่คล้ายกันประกอบด้วย 3 ขั้นตอน: การโหลดรูปภาพให้เลือกเทมเพลต Slider และการตั้งค่าการรวมรหัสด้วยไซต์ เทมเพลตสไลเดอร์ช่วยให้คุณสร้างองค์ประกอบการออกแบบที่แตกต่างกัน ในเวลาเดียวกันบริการมีเอฟเฟกต์มากมายและตัวเลือกอื่น ๆ เพื่อให้ได้ผลลัพธ์ที่ต้องการ เว็บไซต์บอกว่าคุณสามารถฝังรหัสได้โดยไม่ต้องดาวน์โหลดไฟล์หรือดาวน์โหลดและรวมแถบเลื่อนด้วยตัวเอง
cincopa
Cincopa - บริการสวยมาก การสร้าง HTML Slider แต่น่าเสียดายที่ไม่ฟรีอย่างสมบูรณ์ นี่เป็นหนึ่งในโครงการที่คล้ายคลึงกันมากมายที่มีความพิเศษ แผนภาษี. สำหรับรุ่นฟรีข้อ จำกัด ที่แตกต่างกันจะถูกเพิ่มในจำนวนภาพที่ดาวน์โหลดได้การจราจรและ (ที่เลวร้ายที่สุด) วางลายน้ำ ในกรณีนี้แน่นอนทุกอย่างมีการดำเนินการอย่างเชี่ยวชาญคือการออกแบบการตั้งค่าปลั๊กอินสำหรับ CMS ยอดนิยมการสนับสนุนทางเทคนิค ที่นี่คุณต้องดูภาษีในบางบริการที่พวกเขาสามารถราคาไม่แพง
บริการเป็นหนึ่งในไม่กี่คนที่ไม่มีลายน้ำในอัตราค่าไฟฟ้าฟรีในภาพ มีเพียงจำนวนของผลกระทบที่เป็นไปได้เท่านั้นที่มี จำกัด แต่ไม่สำคัญ การตั้งค่าหลายอย่างมีปลั๊กอินพิเศษสำหรับ WordPress โดยทั่วไปทางออกที่ดี
html5maker
HTML5Maker - อีกตัวอย่างหนึ่ง บริการชำระเงินซึ่งทำงานกับการสมัครสมาชิก ในรุ่นฟรีคุณจะต้องทนกับลายน้ำ แต่อัตราเริ่มต้นเริ่มต้นช่วยให้คุณกำจัดมันได้ ในเวลาเดียวกันมันมีราคาค่อนข้างแพง ($ 5 / เดือน) และช่วยให้คุณสร้างสไลเดอร์ได้สูงสุด 3 ตัวพร้อมเอฟเฟกต์ทั้งหมดและเทมเพลตหลายตัว
slippry
ไซต์ประเภทต่อไปนี้ที่มี Sliders เป็นโครงการที่มีสคริปต์สำเร็จรูปเช่น Slippry ไม่มีรูปแบบที่สะดวกในการดาวน์โหลดรูปภาพและข้อบ่งชี้การตั้งค่า แต่ทุกอย่างฟรี คุณดาวน์โหลดรหัส HTML ของ Slider บนโฮสติ้งของคุณและรวมเข้ากับเว็บไซต์ด้วยตนเอง ในนักพัฒนาตามกฎมีเอกสารประกอบการใช้สคริปต์คำอธิบายเกี่ยวกับรหัสและตัวอย่างของงาน
เหวี่ยง
โดยทั่วไปแล้ว Sliders นั้นแตกต่างกัน - ร่อนเป็นตัวอย่างที่ดีของสิ่งนี้ สคริปต์ช่วยให้คุณสร้างแถบเลื่อนที่สวยงามสำหรับพื้นหลังของเว็บไซต์ ง่ายรวดเร็วปรับตัว
tosrus
Tosrus เป็นอีกหนึ่งตัวเลื่อนที่น่าสนใจซึ่งค่อนข้างแตกต่างจากการใช้งานแบบคลาสสิกและเช่นเดียวกับแกลเลอรี่ (อย่างไรก็ตามมันจะมีประโยชน์) โดยปกติจะแสดงทั้งบนคอมพิวเตอร์ธรรมดาและบนสมาร์ทโฟน เมื่อคลิกที่ภาพมันจะเปิดในหน้าต่างเต็มซึ่งจะมีแถบเลื่อน รองรับการแทรก แต่มีเพียงรูปภาพเท่านั้น แต่ยังรวมถึงเนื้อหา HTML ด้วยวิดีโอ
สคริปต์ปรับขนาดภาพได้อย่างมากดังนั้นการสร้างมันจึงง่ายที่สุด บนเว็บไซต์คุณจะพบรหัสตัวอย่างและคำอธิบาย แถบเลื่อนมีความสามารถในการนำทางผ่านลูกศรหรือ "องค์ประกอบที่ไฮไลต์" ที่ด้านล่างของภาพ
แถบเลื่อนทางสายตาสำหรับเว็บไซต์ดูมีสไตล์มาก มีองค์ประกอบการนำทางบล็อกข้อความ พื้นหลังทั่วไปสำหรับองค์ประกอบจะกลายเป็นภาพเบลอจากตัวเลื่อนเองซึ่งสร้างผลที่น่าสนใจมาก
- ตัวเลื่อน Adaptive บน jQuery เหมาะสำหรับอุปกรณ์ทั้งหมด สามารถแสดงได้ทั้งความกว้างทั้งหมดของหน้าจอหรือในบล็อกแยกต่างหาก คำอธิบายนั้นค่อนข้าง "ดั้งเดิม" แต่คุณสามารถเข้าใจได้ การตั้งค่าไม่มากเท่ากับในตัวเลือกอื่น ๆ
วิธีนี้เป็นเหมือนแกลเลอรี่ แต่ฉันดึงดูดส่วนตัว ใช้งานง่ายง่ายต่อการปรับแต่งและฟรี - ข้อได้เปรียบหลักของ Desoslide นักพัฒนาเว็บไซต์สามารถมีประโยชน์
นักพัฒนาโครงการกำลังวางตำแหน่งเป็นแกลเลอรี่ฟรีบน jQuery แม้ว่าจะมองเห็นตัวเลื่อนเป็นประจำ โซลูชันเข้ากันได้กับเบราว์เซอร์ที่สำคัญทั้งหมดมีเอฟเฟกต์ที่แตกต่างกันมากมายสำหรับการเปลี่ยนภาพ ชอบส่วนสาธิตที่คุณสามารถใช้แบบเรียลไทม์เพื่อใช้การตั้งค่าเหล่านั้นหรืออื่น ๆ เพื่อดูว่าแถบเลื่อนทำงานอย่างไรสำหรับไซต์
- สคริปต์ Slider JQuery ที่เรียบง่ายฟังก์ชั่นที่กำหนดเองบน HTML5 และ CSS3 การตัดสินใจเข้ากันได้กับเบราว์เซอร์ทั้งหมดและรองรับการออกแบบที่ปรับได้ นักพัฒนาจะชอบ
การแก้ปัญหาจะมีประโยชน์หากคุณต้องการสร้างแถบเลื่อนแบบหมุนวนเมื่อมีการแสดงรูปภาพหลายภาพและจะเลื่อนไปทางซ้าย / ขวาโดยอัตโนมัติ (ตัวอย่างเช่นสำหรับแถวโลโก้พันธมิตรหรืองานแสดงสินค้า) ฉันเพิ่งพิจารณาวิธีการใช้งานนี้ใน WordPress คุณสามารถลองสคริปต์ Jssimpleslider สำหรับเว็บไซต์ธรรมดา
บริการจากรูปภาพที่คุณดาวน์โหลดจะสร้างแฟลชไดรฟ์ USB ซึ่งแสดงบนไซต์เป็นตัวเลื่อน มันง่ายที่จะทำงานกับเครื่องมือนี้แม้ว่ามันจะไม่เพียงพอสำหรับตัวเลื่อนคลาสสิก (อย่างน้อยก็มีการควบคุมไม่เพียงพอ) ทั้งหมดที่คุณสามารถถามได้คือการเชื่อมโยงภายนอกและเอฟเฟกต์การเปลี่ยนภาพ คุณสามารถใช้บริการนี้ได้ฉันคิดว่าคุณแทบจะไม่เพียงแค่นำมันเป็นหนึ่งในต้นฉบับของงาน
wowlider
อย่างที่ฉันบอกที่จุดเริ่มต้นมีโปรแกรมในการสร้างสไลเดอร์ที่ติดตั้งบนคอมพิวเตอร์ Whowlider เป็นตัวอย่างที่ยอดเยี่ยมของซอฟต์แวร์ดังกล่าว มีตัวเลือกที่แตกต่างกันมากการตั้งค่าการออกแบบ ฯลฯ มันไม่จำเป็นต้องมีความรู้ใด ๆ เกี่ยวกับ HTML การตั้งค่าตัวเลื่อนทั้งหมดจะดำเนินการอย่างรวดเร็วและง่ายดาย คุณสามารถดาวน์โหลดโปรแกรมได้ฟรี แต่จะปรากฏขึ้นโดยไม่ต้องซื้อใบอนุญาตบนตัวเลื่อน
cu3ox
โปรแกรม Cu3ox ต้องเผชิญกับผลกระทบ 3 มิติที่ผิดปกติสำหรับการเปลี่ยนภาพ มันถูกใช้เพื่อสร้างแกลเลอรี่แฟลชและสไลเดอร์ ทำงานกับ Win และ Mac มีมากมายที่นี่ การตั้งค่าที่แตกต่างกันตัวเลือกสำหรับการเปลี่ยนรูปภาพการแปลสำหรับภาษาที่แตกต่างกัน ฯลฯ สำหรับการใช้งานส่วนตัวคุณสามารถเลือกรุ่นฟรีแม้ว่ามันจะมีลายน้ำ
หากบริการโปรแกรมและสคริปต์ของสไลเดอร์เหล่านี้ไม่เพียงพอสำหรับคุณฉันแนะนำให้คุณอ่าน - มีประมาณ 100 ตัวเลือกที่แตกต่างกันสำหรับการใช้งานของพวกเขา ในหลักการทั้งหมดขึ้นอยู่กับข้อกำหนดสำหรับการทำงานและความรู้ของคุณ บริการพิเศษสำหรับการสร้างแถบเลื่อนที่ระบุในตอนเริ่มต้นทำงานค่อนข้างดีและฟรี หากคุณคุ้นเคยกับการพัฒนาเว็บคุณสามารถเข้าใจได้ในบทความ สคริปต์ jquery. สำหรับผู้ที่พัฒนาโซลูชั่นต่างประเทศจะเหมาะสม บางคนพร้อมใช้งานออนไลน์ด้วยการสมัครสมาชิกอื่น ๆ คือโปรแกรมเดสก์ท็อป หลังมีราคาแพงกว่า แต่ไม่มีข้อ จำกัด เกี่ยวกับจำนวนองค์ประกอบที่สร้างขึ้นหรือข้อ จำกัด ชั่วคราว
โดยวิธีการถ้าคุณทราบสคริปต์การสร้างบริการ / สไลเดอร์ที่น่าสนใจสำหรับไซต์เขียนชื่อเรื่องและลิงก์ไปยังพวกเขาในความคิดเห็น
1. สไลด์โชว์ jquery ที่ยอดเยี่ยม
สไลด์โชว์ที่งดงามขนาดใหญ่ด้วย ใช้ jQuery เทคโนโลยี
2. ปลั๊กอิน JQuery "Scale Carousel"
สไลด์โชว์ที่ปรับขนาดได้โดยใช้ jQuery คุณสามารถตั้งขนาดสำหรับสไลด์โชว์ที่คุณเหมาะสมที่สุด
3. JQuery Plug "Slidejs"
แถบเลื่อนภาพที่มีคำอธิบายข้อความ
4. ปลั๊กอิน "jslidernews"
5. Slider CSS3 JQuery
เมื่อคุณเลื่อนเคอร์เซอร์ไปที่ลูกศรนำทางภาพขนาดย่อรอบของสไลด์ถัดไปจะปรากฏขึ้น
6. Slider JQuery น่ารัก "วงจรการนำเสนอ"
slider JQuery พร้อมตัวบ่งชี้การโหลดภาพ มีการเปลี่ยนแปลงสไลด์อัตโนมัติ
7. JQuery Plugin "Slider Parallax"
เลื่อนที่มีผลพื้นหลังปริมาตร ไฮไลต์ของตัวเลื่อนนี้ในพื้นหลังของพื้นหลังซึ่งประกอบด้วยหลายชั้นซึ่งแต่ละอันจะถูกเลื่อนไปด้วย ความเร็วต่างๆ. เป็นผลให้การเลียนแบบของเอฟเฟกต์เซอร์ราวด์ มันดูสวยงามมากคุณสามารถมั่นใจได้เกี่ยวกับเรื่องนี้ ผลที่ราบรื่นมากขึ้นจะแสดงในเบราว์เซอร์ดังกล่าวเป็น: โอเปร่า Google Chrome.เช่น.
8. สดใหม่แสง jquery slider "bxslider 3.0"
ในหน้าสาธิตในส่วน "ตัวอย่าง" คุณสามารถค้นหาลิงก์ไปยังตัวเลือกการใช้งานที่เป็นไปได้ทั้งหมดสำหรับปลั๊กอินนี้
9. Slider JQuery ของรูปภาพปลั๊กอิน "Slidejs"
Slider JQuery ที่ทันสมัยจะสามารถตกแต่งโครงการของคุณได้อย่างแน่นอน
10. JQuery Plugin Slideshow "Easy Slides" V1.1
ปลั๊กอิน jQuery ใช้งานง่ายเพื่อสร้างการนำเสนอภาพนิ่ง
11. ปลั๊กอิน "jQuery Slidy"
ปลั๊กอิน jquery ง่ายในการออกแบบที่หลากหลาย มีการเปลี่ยนแปลงสไลด์อัตโนมัติ
12. แกลเลอรี่ JQuery CSS พร้อมการเปลี่ยนแปลงสไลด์อัตโนมัติ
หากผู้เข้าชมภายในระยะเวลาหนึ่งไม่ได้กดลูกศร "ไปข้างหน้า" หรือ "ย้อนกลับ" แกลเลอรี่จะเริ่มเลื่อนโดยอัตโนมัติ
13. Slider JQuery "Nivo Slider"
ปลั๊กอินแสงคุณภาพสูงระดับมืออาชีพมากพร้อมรหัสที่ถูกต้อง มีการเปลี่ยนแปลงสไลด์ที่แตกต่างกันมากมาย
14. JQuery Slider "Mobilyslider"
สไลเดอร์สด Slider JQuery พร้อมผลต่าง ๆ ของการเปลี่ยนแปลงภาพ
15. ปลั๊กอิน JQuery "Slider²"
Slider ง่ายพร้อมการเปลี่ยนแปลงสไลด์อัตโนมัติ
16. ตัวเลื่อน JavaScript สด
เลื่อนพร้อมการเปลี่ยนภาพอัตโนมัติ
ปลั๊กอินสำหรับการใช้สไลด์โชว์ด้วยการเปลี่ยนแปลงสไลด์อัตโนมัติ เป็นไปได้ที่จะจัดการการแสดงผลโดยใช้รูปขนาดย่อของภาพ
slider รูปภาพ JQuery CSS โดยใช้ปลั๊กอิน Nivoslider
19. Slider JQuery "Jshowoff"
ปลั๊กอินเพื่อหมุนเนื้อหา สามตัวเลือกสำหรับการใช้งาน: ไม่มีการนำทาง (ด้วยการเลื่อนอัตโนมัติในรูปแบบสไลด์โชว์) ด้วยการนำทางในรูปแบบของปุ่มด้วยการนำทางในรูปแบบของภาพ
20. ปลั๊กอินผลงานชัตเตอร์เอฟเฟกต์
ปลั๊กอิน JQuery Fresh สำหรับพอร์ตโฟลิโอช่างภาพ แกลเลอรี่ใช้ผลที่น่าสนใจของการเปลี่ยนภาพ ภาพถ่ายแทนที่ซึ่งกันและกันด้วยเอฟเฟกต์คล้ายกับการทำงานของเลนส์ชัตเตอร์
21. Slider CSS Javascript ง่าย "TinysLider 2"
การใช้ตัวเลื่อนภาพโดยใช้ JavaScript และ CSS
22. ลมของ Slider Tinycircliderlider
สไลเดอร์รอบที่มีสไตล์ การเปลี่ยนภาพระหว่างภาพจะดำเนินการโดยการลากไปรอบ ๆ ตัวเลื่อนวงกลมเป็นวงกลมสีแดง เหมาะอย่างยิ่งในเว็บไซต์ของคุณหากคุณอยู่ในการออกแบบใช้องค์ประกอบรอบ
23. เลื่อนรูปภาพบน jQuery
Slider ง่าย "Slider Kit" แถบเลื่อนเป็นตัวแทนในการออกแบบที่หลากหลาย: แนวตั้งและแนวนอน ใช้การนำทางประเภทต่างๆระหว่างภาพ: การใช้ปุ่ม "ไปข้างหน้า" และ "ย้อนกลับ" โดยใช้ล้อเลื่อนของเมาส์โดยใช้การคลิกเมาส์บนสไลด์
24. แกลเลอรี่ที่มี Miniatures "Slider Kit"
แกลลอรี่ "ชุดเลื่อน" Scroll Miniature ดำเนินการทั้งในทิศทางแนวตั้งและแนวนอน การเปลี่ยนระหว่างภาพจะดำเนินการโดยใช้: ล้อเมาส์, การคลิกเมาส์หรือเคอร์เซอร์ขนาดเล็ก
25. Slider เนื้อหา JQuery Slider Slider
แถบเลื่อนเนื้อหาแนวตั้งและแนวนอนบน jQuery
26. JQuery Slide Show "Slider Kit"
สไลด์โชว์พร้อมการเปลี่ยนแปลงสไลด์อัตโนมัติ
27. มืออาชีพง่าย JavaScript Slider CSS3
Slider ที่เรียบร้อยบน JQuery และ CSS3 สร้างขึ้นในปี 2011
สไลด์โชว์ jQuery พร้อมเพชรประดับ
29. สไลด์โชว์ jquery ที่เรียบง่าย
สไลด์โชว์พร้อมปุ่มนำทาง
30. สไลด์โชว์สไลด์โชว์ JQuery "Skitter"
jQuery Plugin "Skitter" เพื่อสร้างสไลด์โชว์ที่น่าทึ่ง ปลั๊กอินรองรับมุมมอง 22 (!) ของเอฟเฟกต์ภาพเคลื่อนไหวต่าง ๆ เมื่อเปลี่ยนภาพ มันสามารถทำงานกับตัวเลือกการนำทางสองตัวสำหรับสไลด์: ใช้หมายเลขสไลด์และมีขนาดย่อ อย่าลืมดูการสาธิตการค้นหาที่มีคุณภาพสูงมาก เทคโนโลยีที่ใช้แล้ว: CSS, HTML, JQuery, PHP
31. สไลด์โชว์ "น่าอึดอัดใจ"
สไลด์โชว์การทำงาน ในรูปแบบของสไลด์สามารถดำเนินการ: ภาพที่เรียบง่ายรูปภาพที่มีลายเซ็นภาพที่มีเคล็ดลับป๊อปอัพคลิปวิดีโอ คุณสามารถใช้ลูกศรลิงก์ไปยังหมายเลขสไลด์และคีย์ไปทางขวา / ซ้ายบนแป้นพิมพ์เพื่อนำทาง สไลด์โชว์ทำในหลายรุ่น: มีรูปขนาดย่อและไม่มีพวกเขา หากต้องการดูตัวเลือกทั้งหมดให้เดินไปตามลิงค์ DEMO # 1 - DEMO # 6 อยู่ด้านบนของหน้าสาธิต
ภาพสไลเดอร์ออกแบบดั้งเดิมมากคล้ายกับพัดลม การเปลี่ยนแปลงสไลด์เคลื่อนไหว การนำทางระหว่างภาพจะดำเนินการโดยใช้ลูกศร นอกจากนี้ยังมีการเปลี่ยนแปลงอัตโนมัติที่สามารถเปิดและปิดโดยใช้ปุ่ม Play / Pause ที่อยู่ด้านบน
Animated Jquery Slider ภาพพื้นหลัง ปรับขนาดโดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงหน้าต่างเบราว์เซอร์ สำหรับแต่ละภาพลอยบล็อกพร้อมคำอธิบาย
34. Slider "Flux Slider" บน JQuery และ CSS3
Slider JQuery ใหม่ เอฟเฟกต์เคลื่อนไหวที่ยอดเยี่ยมหลายอย่างเมื่อเปลี่ยนสไลด์
35. ปลั๊กอิน JQuery "JSwitch"
Animated Jquery Gallery
สไลด์โชว์แสงบน jQuery พร้อมการเปลี่ยนแปลงสไลด์อัตโนมัติ
37. ปลั๊กอินรุ่นใหม่ "Sligedeck 1.2.2"
Slider เนื้อหามืออาชีพ ตัวเลือกเป็นไปได้ด้วยการเลื่อนสไลด์อัตโนมัติรวมถึงตัวเลือกที่ใช้ล้อเลื่อนของเมาส์สำหรับการเปลี่ยนระหว่างสไลด์
38. Slider JQuery "Sudo Slider"
การใส่ร้ายภาพง่ายบน jQuery ตัวเลือกการใช้งานมากมาย: การเปลี่ยนแปลงในแนวนอนและแนวตั้งด้วยลิงก์ไปยังหมายเลขสไลด์และไม่มีพวกเขาด้วยลายเซ็นของรูปภาพและไม่มีผลต่าง ๆ ของการเปลี่ยนแปลงภาพ มีฟังก์ชั่นการเปลี่ยนแปลงสไลด์อัตโนมัติ ลิงก์ไปยังการใช้งานที่เป็นแบบอย่างทั้งหมดสามารถพบได้ในหน้าสาธิต
39. สไลด์โชว์ JQuery CSS3
สไลด์โชว์ที่มีเพชรประดับรองรับโหมดของการเลื่อนสไลด์อัตโนมัติ
40. JQuery "Flux Slider"
เลื่อนที่มีผลกระทบหลายอย่างของการเปลี่ยนแปลงภาพ
41. Simple Jquery Slider
สไลเดอร์ภาพที่มีสไตล์บน jQuery
ในบทความนี้เราจะวิเคราะห์ว่าง่ายที่สุดเท่าที่จะทำได้โดยใช้ CSS Flexbox และการแปลง CSS เพื่อสร้างแถบเลื่อนแบบปรับตัวสำหรับไซต์
ซอร์สโค้ดและสไลเดอร์สาธิต
โครงการของตัวเลื่อนที่เรียกว่า ChiefSlizer ตั้งอยู่บน GitHub คุณสามารถไปที่ลิงค์นี้
เลื่อนที่มีสไลด์ที่ใช้งานอยู่หนึ่งอัน (โดยไม่ต้องวนลูป):
Slider ที่มีสามสไลด์ที่ใช้งานอยู่ (โดยไม่ต้องวนซ้ำ):
ตัวอย่างที่แสดงวิธีการใช้แถบเลื่อนสำหรับการหมุนของบทความ:
ข้อดีของแถบเลื่อนความชื้น
เราแสดงรายการข้อได้เปรียบหลักของตัวเลื่อนนี้:
- ก่อนอื่นเขา ไม่สร้างโคลนขององค์ประกอบ (รายการ) เพื่อจัดระเบียบลูปส์ตามที่นำไปใช้เช่นในปลั๊กอิน owlcarusel และ เนียน.;
- ประการที่สองมันไม่ได้ขึ้นอยู่กับห้องสมุด jquery.; สิ่งนี้ไม่เพียงลบข้อกำหนดเพิ่มเติม แต่ยังทำให้ง่ายขึ้น
- ประการที่สามเขาเป็นจริง ไม่มีการเปลี่ยนแปลงในเอกสาร DOM; สิ่งเดียวที่เขาทำคือเพิ่มหรือเปลี่ยนแปลงค่า CSS ของการแปลงจากองค์ประกอบสไลเดอร์;
- สี่มันมีเฉพาะ ชุดขั้นต่ำ ฟังก์ชั่น; สามารถเพิ่มฟังก์ชั่นเพิ่มเติมได้ขึ้นอยู่กับงาน
- ประการที่ห้ามันเป็นแบบปรับตัว, I.e. มันสามารถใช้กับเว็บไซต์ใด ๆ การปรับตัวของแถบเลื่อนได้รับการกำหนดค่าโดยใช้ CSS;
- หกจำนวนองค์ประกอบที่ใช้งานถูกกำหนดค่าโดยใช้ CSS; ซึ่งหมายความว่ามันสามารถใช้ในการสร้างม้าหมุนด้วยสไลด์ที่ใช้งานหนึ่งและมีจำนวนเงินอื่น ๆ
การติดตั้งแถบเลื่อนความชื้น
การติดตั้ง Slider จะดำเนินการ 3 ขั้นตอน:
- เพิ่ม Slider ChiefiSlider CSS ไปยังหน้าหรือในไฟล์ CSS ที่เชื่อมต่อกับหน้า;
- วางรหัสตัวเลื่อน HTML ในสถานที่ที่ต้องการของหน้า;
- ใส่รหัส JavaScript บนหน้าหรือในไฟล์ JS ที่เชื่อมต่อกับหน้าเว็บ
รหัส CSS และ JavaScript จะลดลงอย่างเหมาะสมการกระทำนี้จะให้โหลดหน้าเว็บที่เร็วขึ้น
วิธีการพัฒนาแถบเลื่อนที่เรียบง่ายสำหรับไซต์ (โดยไม่ต้องวนซ้ำ)
การสร้างแถบเลื่อน chiefslider มันจะประกอบด้วยการสร้างรหัส HTML, CSS และ JavaScript (ไม่มี jQuery)
รหัสตัวเลื่อน HTML chiefslider:
อย่างที่คุณเห็น Slider มีสถาปัตยกรรม HTML ที่ง่ายมาก มันเริ่มต้นด้วยบล็อกหลักซึ่งมีคลาสสไลเดอร์ บล็อกนี้ประกอบไปด้วย 3 องค์ประกอบ
องค์ประกอบแรกคือ sslider__wrapper มันทำหน้าที่เป็น wrapper สำหรับองค์ประกอบ Slider__Item (สไลด์)
องค์ประกอบที่เหลืออีกสององค์ประกอบ (.slider__Control) แสดงถึงปุ่มด้วยสายตา ด้วยความช่วยเหลือของพวกเขานำทางสไลด์ I.e. ไปที่รายการก่อนหน้าและรายการต่อไปนี้
รหัส CSS ของ Slider Chiefslider:
/ * ตำแหน่ง: ญาติ; ล้น: ซ่อน;) .slider__Wrapper (จอแสดงผล: Flex; การเปลี่ยนแปลง: เปลี่ยน 0.6s ง่ายดาย; / * ระยะเวลาการเปลี่ยนแปลง 0.6 สไลด์ในไม่กี่วินาที * /) .slider__Item (Flex: 0 0 50%; / * กำหนด จำนวนภาพนิ่งที่ใช้งาน (ในกรณีนี้ 2 * / ความกว้างสูงสุด: 50%; / * กำหนดจำนวนของภาพนิ่งที่ใช้งาน (ในกรณีนี้ 2 * /) / * รูปแบบสำหรับปุ่ม "ย้อนกลับ" และ "ไปข้างหน้า" * / slider__Control (position: absolute; display: none; ด้านบน: 50%; เปลี่ยน: translatey (-50%); จัด-ข่าว: ศูนย์; ชิด-เนื้อหา: ศูนย์; text-align: ศูนย์; กว้าง: 40px; / * ความกว้างปุ่ม * / ส่วนสูง: 50px; / * ความสูงปุ่ม * / ทึบ: 0.5 / * * * * * โปร่งใส / พื้นหลัง: # 000; / * สีพื้นหลัง * /) .slider__Control_Show (จอแสดงผล: Flex;) .Slider__Control:. เลื่อน Slider__Control: โฟกัส (ตกแต่งข้อความ: none; ร่าง: 0; ทึบ: 0.9 / * โปร่งใส * /) .slider__Control_left (ซ้าย: 0;) .slider__Control_right (ขวา: 0;) .Slider__Control :: ก่อน (Content: " "DISP . วาง: inline-block; ความกว้าง: 20px; / * ไอคอนความกว้าง (ลูกศร) * / ความสูง: 20px; / * ไอคอนความสูง (ลูกศร) * / พื้นหลัง: ศูนย์ศูนย์ไม่มีการทำซ้ำที่โปร่งใส; ขนาดพื้นหลัง: 100% 100%; ) .slider__control_left :: ก่อน (พื้นหลังภาพ: URL ("ข้อมูล: Image / SVG + XML; Charset \u003d UTF8,% 3CSVG XMLNS \u003d" http://www.w3.org/2000/svg "เติม \u003d" % 23FFF "Viewbox \u003d" 0 0 8 8 "% 3E% 3cpath d \u003d" m5.25 0L-4 4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5Z "/% 3E% 3C / SVG% 3E ");) .slider__Control_Right :: ก่อน (" ข้อมูล: ภาพ / SVG + XML; charset \u003d UTF8% 3CSVG xmlns \u003d "http://www.w3.org/2000/svg" เติม \u003d "% 23FFF "Viewbox \u003d "0 0 8 8" % 3E% 3CPATH D \u003d "M2.75 0L-1.5 1.5 2.5 2.5 1.5 2.5-2.5 1.5 4-4-4-4z"/% 3E% 3C / SVG% 3E"); )
อย่างที่คุณเห็นรหัส CSS ของ Slider ยังเป็นเช่นกัน ไม่ยากมาก. คำจำกัดความหลักที่คุณสามารถกำหนดค่าได้ ลักษณะที่ปรากฏ Slider พร้อมกับความคิดเห็น
รหัส CSS ที่กำหนด จำนวนองค์ประกอบที่ใช้งานอยู่:
/ * กำหนดจำนวนสไลด์ที่ใช้งานอยู่ (ในกรณีนี้ 2) * / Flex: 0 50%; สูงสุดความกว้าง: 50%;
รหัสนี้กำหนดจำนวนแถบเลื่อนขององค์ประกอบที่ใช้งานเท่ากับ 2
ยกตัวอย่างเช่นสไลเดอร์ หนึ่งองค์ประกอบที่ใช้งานอยู่คำจำกัดความเหล่านี้จำเป็นต้องมีการเปลี่ยนแปลงดังต่อไปนี้:
/ * กำหนดจำนวนสไลด์ที่ใช้งานอยู่ (ในกรณีนี้ 1) * / Flex: 0 0 100%; สูงสุดความกว้าง: 100%;
สิ่งมีชีวิต ตัวเลื่อน Adaptive ออกกำลังกายผ่านการร้องขอสื่อ
ตัวอย่างเช่นตัวเลื่อนที่อุปกรณ์ที่มีหน้าจอเล็ก ๆ ควรมีสไลด์ที่ใช้งานอยู่หนึ่งอันและมีขนาดใหญ่ - สี่:
Slider__Item (Flex: 0 เป็น 100%; สูงสุดความกว้าง: 100%;) @Media (min-wide: 980px) (Flex: 0 0 25%; สูงสุดความกว้าง: 25%;))
รหัส Slider ของ Javascript Chief Slider:
"ใช้อย่างเข้มงวด"; var multiTemslider \u003d (ฟังก์ชั่น () (ฟังก์ชั่นส่งคืน \u003d document.queryselector (ตัวเลือก), // องค์ประกอบพื้นฐานของ _sliderwrapper \u003d _mainelement.queryselector ("slider__wrapper"), // wrapper สำหรับ slider-item _slideritems \u003d _mainelement.queryselectorlall ( "Slider__Item"), // องค์ประกอบ (.slider-item) _slidercontrols \u003d _mainelement.queryselectorlall ("Slider__Control"), // องค์ประกอบการควบคุม _slidercontrolleft \u003d _mainelement.queryselector ("Slider__Control_left") // "ซ้าย" _slidercontrolright \u003d ปุ่ม _mainelement.queryselector (". Slider__Control_right ปุ่ม"), // ปุ่ม "ขวา" _wrapperwidth \u003d parsefloat (getcomputedstyle (_sliderprper) .width), // wrapper width _Itemwidth \u003d parsefloat (getComputEdstyle (getComputEdstyle (_SliderItems) .width), // ความกว้างของหนึ่ง องค์ประกอบ _positionleftitem \u003d 0, // ตำแหน่งขององค์ประกอบที่ใช้งานซ้าย _transformformform \u003d 0, // ค่าการแปลง slider_wrapper _step \u003d _ITEMWIDTH / _wrapperwidth * 100, // ขั้นตอนค่า (สำหรับการแปลง) _Items \u003d; // อาร์เรย์ขององค์ประกอบ // การกรอกอาร์เรย์ _items _slideritems.foreach (_items.push ((รายการ: รายการตำแหน่ง: ดัชนี, แปลง: 0)); )); var position \u003d (getmin: 0, getmax: _items.length - 1,) var _transformitem \u003d ฟังก์ชัน (ทิศทาง \u003d\u003d\u003d "ขวา") (ถ้า ((_) + _wrapperwidth / _Itemwidth - 1)\u003e \u003d ตำแหน่ง. setmax ) (ส่งคืน;) ถ้า (_slidercontrolleft.classlist.contains ("slider__control_show"!)) (_slidercontrolleft.classlist.add ("slider__control_show");) ถ้า (_slidercontrol_classlist.contains ("slider__control_show") && (_positionleftitem +& (_positionleftitem +& (_positionleftitem _ITEMWIDTH)\u003e \u003d position.getmax) (_slidercontrolright.classlist.remove ("slider__control_show");) _positionleftitem ++; _Transform - \u003d _ ขั้นตอน;) ถ้า (ทิศทาง \u003d\u003d\u003d "ซ้าย") (ถ้า (_positionleftitem<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());
การดำเนินการหลักในรหัส JavaScript เรียกใช้งานฟังก์ชัน _TransFormitem ฟังก์ชั่นนี้ขึ้นอยู่กับทิศทางที่ถ่ายโอนไปยังแปลงองค์ประกอบ element.slider__wrapper
การเริ่มต้นของตัวเลื่อน มันมีดังนี้:
Var Slider \u003d MultiTemslider ("Slider") Slider สาธิต
วิธีการสร้างแถบเลื่อนที่มีการวนลูป?
การคำนวณสไลด์สามารถทำได้โดยการแปลงองค์ประกอบ Slider__Item
ในการทำเช่นนี้จำเป็นต้องนำค่าของตำแหน่งปัจจุบันและการเปลี่ยนแปลงไปยังแต่ละองค์ประกอบ. slider__Item
เหมาะสมที่สุดการกระทำเหล่านี้สามารถทำได้โดยใช้อาร์เรย์ _ITEMS:
var _tems \u003d; // การกำหนดค่า _sliderItems.Foreach อาร์เรย์ elements.slider__item (ฟังก์ชั่น (Item ดัชนี) (_Items.push ((รายการ: รายการตำแหน่ง: ดัชนีแปลง: 0));));
แต่คุณสามารถเชื่อมโยงข้อมูลกับองค์ประกอบไม่เพียงโดยอาร์เรย์และตัวอย่างเช่นการใช้แอตทริบิวต์ข้อมูล แต่การดำเนินงาน DOM เป็นที่ช้าที่สุดและทรัพยากรมากก็จะไม่แนะนำให้ใช้มันเมื่อมันสามารถทำได้อย่างใดที่แตกต่างกัน
ขั้นตอนต่อไปคือการสร้างฟังก์ชั่นสำหรับการคำนวณองค์ประกอบ sslider__ โดยมีตำแหน่งน้อยที่สุดและสูงสุด
ตำแหน่ง var \u003d (getItemmin: ฟังก์ชั่น () (var indexitem \u003d 0; _Items.Foreach (ฟังก์ชั่น (รายการ INDEX) (IF (Item.Position< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position > _ITEMS.Position) (IndexItem \u003d Index;))); ส่งคืน indexiem; ), Getmin: ฟังก์ชั่น () (ส่งคืน _ITEMS.Position;), GetMax: ฟังก์ชั่น () (ส่งคืน _ITEMS.Position;))
ขั้นตอนสุดท้ายใครต้องทำคือการจบการทำงาน _transformitem. คือเพิ่มรหัสลงในมันที่จะเปลี่ยนตำแหน่งขององค์ประกอบ .slider__Item และทำการเปลี่ยนแปลงมัน
var _transformitem \u003d ฟังก์ชั่น (ทิศทาง) (ทิศทาง \u003d\u003d\u003d "ขวา") (_positionleftitem ++; if ((_positionleftitem + _wrapperwidth / _itemwidth - 1)\u003e position.getmax ()) (nextItem \u003d Position.getItemmin (); _Items ตำแหน่ง \u003d position.getmax () + 1; _Items.Transform + \u003d _Items.LengTh * 100; _Items.Item.Style.transform \u003d "translatex (" + _Items.transform + "%)";) _Transform - \u003d _Step;) ถ้า (ทิศทาง \u003d\u003d\u003d "ซ้าย") (_positionleftitem--; if (_positionleftitem< position.getMin()) {
nextItem = position.getItemMax();
_items.position = position.getMin() - 1;
_items.transform -= _items.length * 100;
_items.item.style.transform = "translateX(" + _items.transform + "%)";
}
_transform += _step;
}
_sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}
ในความเป็นจริงทุกอย่างง่ายที่นี่
ยกตัวอย่างเช่นในการสั่งซื้อที่จะย้ายไปสไลด์ถัดไปเป็นครั้งแรกในรายการอาร์เรย์ที่กำลังมองหารายการที่มีมากขึ้นตำแหน่งกว่า element.slider__item ขวาปัจจุบันมาก
หากองค์ประกอบดังกล่าวในอาร์เรย์อยู่ที่นั่นการเปลี่ยนแปลงขององค์ประกอบจะถูกดำเนินการ .slider__Wrapper (I. , การกระทำเช่นเดียวกับในอัลกอริทึมโดยไม่ต้องวนซ้ำ)
แต่ถ้า ไม่มีองค์ประกอบดังกล่าวนอกเหนือจากการเปลี่ยนแปลง Slider__Wrapper การกระทำจำนวนหนึ่งดำเนินการ ครั้งแรกในรายการรายการอาร์เรย์รายการ ด้วยตำแหน่งน้อยที่สุด. หลังจากได้รับรายการนี้เขา ตำแหน่งถูกตั้งค่าค่าที่จะเท่ากับค่าขององค์ประกอบที่ถูกต้องปัจจุบัน + 1. และแน่นอนว่าการทำงาน การเปลี่ยนแปลงของมันสำหรับจำนวนเปอร์เซ็นต์ดังกล่าวเพื่อให้อยู่ในตอนท้ายเช่นฉัน หลังจากองค์ประกอบสุดท้าย
หากต้องการย้ายไปยังสไลด์ก่อนหน้าการดำเนินการที่คล้ายกันจะดำเนินการ แต่ในทางตรงกันข้าม
นอกจากนี้สำหรับสไลเดอร์ที่มีการวนลูปคุณไม่จำเป็นต้องเปลี่ยนการมองเห็นของปุ่ม "ซ้าย" และ "ขวา" ปุ่มเหล่านี้ในตัวเลื่อนรุ่นนี้จะปรากฏขึ้นเสมอ
ในการดำเนินการนี้คุณต้อง:
- ลบคลาส Slider__Control_show ที่องค์ประกอบที่เหมาะสม "ถูกต้อง";
- ใน CSS สำหรับตัวเลือก Slider__Control เปลี่ยนค่าของคุณสมบัติการแสดงผลบน Flex
วิธีการสร้างแถบเลื่อนที่มีห่วงและการเปลี่ยนแปลงสไลด์อัตโนมัติ
โปรแกรมเลื่อนอัตโนมัติของสไลด์หลังจากช่วงเวลาหนึ่งสามารถใช้งานได้โดยใช้ฟังก์ชั่น SetInterval
VAR _CYCLE \u003d ฟังก์ชั่น (ถ้า (! _config.iscycling) (ส่งคืน;) _Interval \u003d setInterval (ฟังก์ชั่น ();), _config.interval);)
ฟังก์ชั่น setInterval ในตัวอย่างนี้จะทำงานฟังก์ชั่น _TransFormitem ในช่วงเวลาที่แน่นอนเท่ากับมูลค่าของการเปลี่ยนแปลง _config.interval
นอกจากนี้หยุดการเปลี่ยนสไลด์อัตโนมัติเป็นที่พึงปรารถนาที่จะเพิ่มอย่างอื่นเพิ่มเคอร์เซอร์ไปที่แถบเลื่อน
คุณสามารถใช้ฟังก์ชันนี้ได้ดังนี้:
ถ้า (_config.pause && _config.iscycling) ( "MouseEnter" ฟังก์ชั่น () ( "MouseEnter" ฟังก์ชั่น ())); _maineleave.AddeventListener ( "MouseLeave" ฟังก์ชั่น () (ClearInterval (_Interval); _cycle (_config ทิศทาง);));)
วิธีการหยุดการเปลี่ยนแปลงสไลด์อัตโนมัติหากรายการไม่สามารถมองเห็นได้กับผู้ใช้?
ปิดใช้งานการเลื่อนสไลด์อัตโนมัติเหมาะสำหรับสองกรณี:
- เมื่อหน้า (ที่ตั้งอยู่ที่แถบเลื่อนนี้) ไม่ทำงาน
- เมื่อแถบเลื่อนอยู่นอกขอบเขตของหน้า
การประมวลผลกรณีแรกสามารถนำไปใช้โดยใช้เหตุการณ์ VisibyChange
Document.addeventListener ("VisibyChange", _handlevibyChange, False);
ฟังก์ชั่นสำหรับตัวจัดการเหตุการณ์ VisibyChange:
// การประมวลผลกิจกรรม "ทัศนวิสัยการมองเห็นการเปลี่ยนแปลง" var _handlevibilitychange \u003d function () (ถ้า (document.visibilitystate \u003d\u003d\u003d "ซ่อน") (ClearInterval (_Interval); _cycle (_config.direction);))
การคำนวณการมองเห็นขององค์ประกอบสามารถจัดได้โดยใช้ฟังก์ชั่น _selementvible:
ฟังก์ชั่น _selementvisible (องค์ประกอบ) (var rect \u003d element.getboundingclientrect (), vwidth \u003d window.innerwidth || doc.documentelement.clientwidth, vheight \u003d window.innerheight || doc.documentelement.clientheight, elemfrompoint \u003d ฟังก์ชั่น (x, y) (x, y) ส่งคืน Document.ElementFrompoint (x, y);); ถ้า (rect.right< 0 || rect.bottom < 0 || rect.left > vwidth || Rect.top\u003e Vheight) (return false;) กลับ (Element.contains (ElemFromPoint) || element.contains (ElemFromPoint) || element.contains (ElemFROMPoint) || element.contains (ElemFromPoint (Rect.left, Rect.Bottom )); )
ใส่การโทร _selementvibleible ตัวอย่างเช่นจนถึงจุดเริ่มต้นของฟังก์ชัน _TransFormitem การกระทำนี้จะอนุญาตให้ยกเลิกการเลื่อนสไลด์อัตโนมัติหากตัวเลื่อนอยู่นอกวิวพอร์ตในปัจจุบัน
var _transformitem \u003d ฟังก์ชั่น (ทิศทาง) (var nextitem; ถ้า (! _iselementvisible (_mainelement)) (ส่งคืน;) // ...
Slider ตอบสนองต่อการเปลี่ยนแปลงในขนาดของหน้าต่างเบราว์เซอร์
ตัวเลือกนี้ของตัวเลื่อน Adaptive แตกต่างจากของก่อนหน้านี้ที่อนุญาต เปลี่ยนจำนวนองค์ประกอบที่ใช้งานอยู่ (สไลด์) เมื่อหน้าต่างเบราว์เซอร์ถูกปรับขนาด. โดยปกติผู้ใช้จะไม่เปลี่ยนขนาดของเบราว์เซอร์ แต่ก็ยังสามารถเกิดขึ้นได้
สิ่งนี้ดำเนินการโดยใช้เหตุการณ์ปรับขนาดและอาร์เรย์ _States อาร์เรย์ใช้สำหรับการคำนวณ การใช้งานจะอนุญาตให้ไม่ดำเนินการใหม่ของตัวเลื่อนเมื่อไม่จำเป็นต้องใช้
เมื่อไม่นานมานี้ฉันเริ่มต้นฉบับ jQuery ผมคิดว่าทุกคนรู้ว่าสิ่งที่เรียกว่าห้องสมุดที่นิยมมากที่สุดสำหรับการพัฒนาและการสร้างสคริปต์ (สคริปต์) ใน JavaScript ด้วยมันเป็นเรื่องง่ายมากที่จะสร้างองค์ประกอบที่งดงามและอินเทอร์แอคทีฟของเว็บไซต์
ในบทความนี้ฉันต้องการบอกวิธีสร้างสไลเดอร์สากลอย่างง่ายโดยใช้ jQuery ในความเป็นจริงในเครือข่ายจำนวนมากของแถบเลื่อนสำเร็จรูปที่มีความหลากหลายซึ่งบางครั้งมองอย่างดึงดูดและการทำงานมาก แต่เราจะทำให้มันจากรอยขีดข่วน
ดังนั้นคุณสมบัติของแถบเลื่อนของเราบน jQuery (ซึ่งฉันเรียกว่า hwslider) สามารถสังเกตได้?
- ใช้งานง่ายและการออกแบบ - ฉันต้องการสร้างสคริปต์ที่เรียบง่ายโดยไม่ต้องจีบดังนั้นฉันจึงไม่ได้ใช้ภาพเคลื่อนไหวใน CSS3 และรหัสกลายเป็นอเนกประสงค์และเข้าใจได้มาก
- ความสามารถในการแทรกลงในสไลด์ของภาพทั้งสองและรหัส HTML ใด ๆ
- ความสามารถในการเลื่อนผ่านสไลด์ตามลำดับ (ส่งต่อ - ย้อนกลับ) และเลือกแต่ละสไลด์ (1,2,3,4 ... )
- ลิงก์ที่เกิดขึ้นใหม่โดยอัตโนมัติ (ก่อนหน้านี้ - ถัดไปและด้วยหมายเลขสไลด์) คุณจะต้องใส่จำนวนเงินที่เหมาะสมและทุกอย่างอื่นจะคำนวณตัวเอง มันสามารถสังเกตได้ว่าจำนวนสไลด์ไม่ จำกัด
สคริปต์เข้ากันได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด: IE, Opera, Firefox, Safari, Chrome (เนื่องจาก Slider ไม่ใช้ CSS3)
เริ่มต้นด้วยมาร์กอัป HTML กัน ในตำแหน่งที่ถูกต้องหน้า HTML หรือเทมเพลตที่คุณต้องใส่
ที่นี่ทุกอย่างง่าย ๆ อย่างที่คุณเห็นคุณสามารถแทรกสไลด์ให้ได้มากที่สุดโดยการสร้าง DIV ใหม่ คุณสามารถแทรกรหัส HTML ใด ๆ ภายในเช่นรูปภาพหรือบล็อกที่มีข้อความ อย่าลืมเฉพาะการเชื่อมต่อไลบรารีของตัวเองบน jQuery ด้วยสคริปต์ JS ทั้งหมด หากคุณไม่ทราบวิธีดูในตัวอย่าง
# Slider-wrap (/ * Slider ฝักและปุ่ม * / ความกว้าง: 660px;) #slider (/ * slider ฝัก * / ความกว้าง: 640px; ความสูง: 360px; overflow: ซ่อน; n #eee solid 10px; ตำแหน่ง: ญาติ; ) .ssslide (/ * สไลด์ * / ความกว้าง: 100%; ความสูง: 100%;) ลิงค์ SLI-links (/ * ปุ่มเปลี่ยนสไลด์ * / ส่วนต่างด้านบน: 10px; ตรงกลาง;). SLI-Links สไลด์ควบคุม (ระยะขอบ: 2px; จอแสดงผล: inline-block; ความกว้าง: 16px; ความสูง: 16px; overflow: ซ่อน; text-indent: -9999px; พื้นหลัง: URL (radiobg.png) กึ่งกลางล่างไม่ซ้ำ;) .sli -Links. Control-Slide: Hover (เคอร์เซอร์: ตัวชี้; ตำแหน่งพื้นหลัง: ศูนย์กึ่งกลาง;) .sli-links. control-slide.active (ตำแหน่งพื้นหลัง: Center Top;) #PrewButton, #NextButton (/ * ลิงก์ " ถัดไป "และ" pedid "* / จอแสดงผล: บล็อก; ความกว้าง: 15px; ความสูง: 100% ตำแหน่ง: แน่นอน; ด้านบน: 0; overflow: ซ่อน; text-indent: -999px; พื้นหลัง: URL (arrowbg.png) ศูนย์ซ้าย ไม่มีการทำซ้ำ; ความทึบแสง: 0.8; z-index: 3; โครงร่าง: ไม่มี! สำคัญ;) #PrewButton (ซ้าย: 10px;) #nextbutton (ขวา: 10px; พื้นหลัง; : URL (arrowbg.png) ขวากลางไม่ซ้ำ;) #PrewButton: Hover, #NextButton: โฮเวอร์ (ความทึบ: 1;)
เรามาสงสัยในรายละเอียดเพิ่มเติม ครั้งแรกที่เราให้หน่วยหลักที่มีตัวระบุ "Slider-wrap" ความกว้างที่ต้องการ เนื่องจากบล็อกอื่น ๆ ทั้งหมดถูกแทรกลงไปแล้วความสูงไม่สามารถถามได้มันจะขึ้นอยู่กับสิ่งที่จะอยู่ภายใน จากนั้นเราต้องตั้งค่าขนาดของภาชนะที่สไลด์จะเป็น นี่คือ - #slider ให้เราถามความกว้างและความสูงเช่นเดียวกับเช่นขอบใน 10 พิกเซล นี่คือความกว้าง - 640px น้อยกว่าความกว้างของผู้ปกครองเนื่องจากเราเพิ่มเส้นขอบด้วยความกว้าง 10px ทางด้านขวาและซ้าย ความกว้างของสไลด์เอง (.slide) ยังขึ้นอยู่กับความกว้างของ DIV นี้เช่นกัน
และล่าสุด: เราต้องตั้งตำแหน่ง: ญาติสำหรับคอนเทนเนอร์สไลด์เป็นสไลด์ภายใน - มีการวางตำแหน่งที่แน่นอน สำหรับภาพนิ่งตัวเองใน CSS มีความกว้างและความสูงเท่านั้น คุณสมบัติที่เหลือถูกตั้งค่าแล้วในสคริปต์ jQuery
Selector.sli-links เป็นบล็อกที่ปุ่มเปลี่ยนไปเป็นสไลด์ที่ต้องการ ปุ่มเหล่านี้เป็นองค์ประกอบที่เรียบง่ายของสปีชีส์ ซึ่งถูกแทรกในปริมาณที่ต้องการโดยอัตโนมัติด้วยกันและกับลิงค์พาเรนต์ของพวกเขา สำหรับปุ่มที่เราขอให้มีมุมมองที่สวยงามคือเราทำสแควร์แต่ละปุ่มจัดเรียงพวกเขาทั้งหมดในศูนย์รวมถึงขอบคุณมากเกินไป: ซ่อนเร้นและเยื้องข้อความ: -9999px เราลบข้อความออกจากไอคอนพื้นหลังเท่านั้นที่ นอกจากนี้ยังมีการเปลี่ยนแปลงเมื่อคุณโฮเวอร์บนองค์ประกอบของเคอร์เซอร์นี้ เพื่อความสะดวกฉันใช้สไปรท์ซึ่งลดจำนวนภาพ
ถัดไปจะถูกดึงปุ่มใช้งานอยู่ เพียงเปลี่ยนตำแหน่งพื้นหลัง จากนั้นส่งลิงก์ใหม่เพื่อไปที่หลักฐานและสไลด์ก่อนหน้า คุณสามารถให้การออกแบบใด ๆ กับพวกเขาเช่นเดียวกับปุ่ม ลิงก์เหล่านี้ถูกแทรกโดยอัตโนมัติภายใน #slider แต่พวกเขาสามารถมองเห็นได้ฉันถามพวกเขา ตำแหน่งที่แน่นอน และชั้นบนสุด (z-index: 3) เพื่อให้ปรากฏเหนือสไลด์ ฉันคิดว่าด้วย CSS ทุกอย่างชัดเจนที่นี่และเพียงแค่: คุณสามารถเปลี่ยนคุณสมบัติเกือบทั้งหมดเพื่อสร้างแถบเลื่อนตามที่คุณต้องการ
ตอนนี้ลองพิจารณาสคริปต์เอง:
var hwslidespeed \u003d 700; var hwtimeout \u003d 3000; var hwneedlinks \u003d true; $ (เอกสาร). Ready (ฟังก์ชั่น (e) ($ ("สไลด์") CSS (("ตำแหน่ง": "Absolute", "Top": "0", "ซ้าย": "0")) ปิดบัง () .eq (0) .show (); var slidenum \u003d 0; var slideetime; slidecount \u003d $ ("# slider .slide") ขนาด () var animslide \u003d ฟังก์ชั่น (arrow timeTeTime); $ (.ssslide ") EQ (slidenum) .fadeout (hwslidespeed); ถ้า (ลูกศร \u003d\u003d" ถัดไป ") (ถ้า (slidenum \u003d\u003d (slideCount-1)) (slidenum \u003d 0;) อื่น (Slidenum ++) ) มิฉะนั้นถ้า (ลูกศร \u003d\u003d "prew") (ถ้า (slidenum \u003d\u003d 0) (slidenum \u003d slidecount-1;) อื่น (sliderum- \u003d 1)) อื่น (slidenum \u003d arrow;) $ ("สไลด์") EQ (Slidenum) .Fadein (hwslidespeed, rotator); $ ("การควบคุม - สไลด์.active") removeclass ("ใช้งาน"); $ ("การควบคุม - สไลด์") EQ (Slidenum). addclass ("ใช้งานอยู่ ");) ถ้า (hwneedlinks) (var $ linkarrow \u003d $ (" "") .prependto ("# slider"); $ ("# NextButton") คลิก (ฟังก์ชั่น () (Animslide ("ถัดไป");) $ ("#PrewButton") คลิก (ฟังก์ชั่น () (Animslide ("prew");))) var $ adderspan \u003d ""; $ ("สไลด์") แต่ละ (ฟังก์ชั่น (ดัชนี) ($ adderspan + \u003d " "; }); $("
ขั้นแรกการตั้งค่าจะถูกบันทึกไว้ในตัวแปร: hwslidespeed - ความเร็วพลังงานสไลด์, hwtimeout - เวลาหลังจากการเปลี่ยนสไลด์อัตโนมัติ hwneedlinks - ควบคุมลิงก์ "ถัดไป" และ "ก่อนหน้า" หากค่าของตัวแปรนี้เป็นจริงลิงก์เหล่านี้ จะปรากฏขึ้นและหากเป็นเท็จดังนั้นพวกเขาจะไม่ (เช่นเดียวกับในหน้าหลักของบล็อกของฉัน)
ถัดไปเราตั้งค่าคุณสมบัติ CSS ที่จำเป็นสำหรับสไลด์โดยใช้วิธี ..css () บล็อกที่มีสไลด์เรากำหนดซึ่งกันและกันโดยใช้การวางตำแหน่งที่แน่นอนจากนั้นซ่อนไว้ทั้งหมด () แล้วแสดงเฉพาะครั้งแรก ตัวแปร Slidenum คือจำนวนของสไลด์ที่ใช้งานอยู่นั่นคือเคาน์เตอร์
ตรรกะหลักของ Slider JQuery ของเราคือคุณสมบัติ Animslide มันยอมรับพารามิเตอร์เดียว หากเราให้สาย "ถัดไป" หรือ "เตรียมเสียง" กับมันผู้ประกอบการตามเงื่อนไขจะทำงานและสไลด์ต่อไปนี้หรือสไลด์ก่อนหน้านี้จะปรากฏขึ้น หากเราลดลงเป็นค่าของตัวเลขหมายเลขนี้จะกลายเป็นสไลด์ที่ใช้งานอยู่และจะปรากฏขึ้น
ดังนั้นคุณสมบัตินี้จะซ่อน DIV ปัจจุบันให้คำนวณใหม่และแสดงให้เห็น
โปรดทราบว่าวิธีการ .Fadein () ซึ่งทำให้สไลด์ใช้งานที่ชัดเจนถูกกำหนดโดยอาร์กิวเมนต์ที่สอง นี่คือฟังก์ชั่นการโทรกลับที่เรียกว่า มันดำเนินการเมื่อสไลด์ปรากฏขึ้นอย่างสมบูรณ์ ในกรณีนี้สิ่งนี้ทำเพื่อให้แน่ใจว่าการเลื่อนสไลด์อัตโนมัติ ฟังก์ชั่น rotator ที่กำหนดไว้ด้านล่างทำให้ฟีเจอร์ Animslide อีกครั้งเพื่อไปที่สไลด์ถัดไปผ่านช่วงเวลาที่คุณต้องการ: เราได้รับการปิดให้การเลื่อนอย่างต่อเนื่อง
ทุกอย่างใช้งานได้ดี แต่เราจำเป็นต้องหยุดการดำเนินการอัตโนมัติหากผู้ใช้นำเคอร์เซอร์ไปที่ตัวเลื่อนหรือกดปุ่ม ในการทำเช่นนี้จะมีการสร้าง Pause แบบแปรผัน หากค่าของมันเป็นบวก - จริงหมายความว่าการสลับอัตโนมัติจะไม่เป็น การใช้วิธีการนี้ () เราระบุ: ล้างตัวจับเวลาหากใช้งาน - ClearTimeout (SlideTime) และติดตั้ง Pause \u003d TRUE และหลังจากถอดเคอร์เซอร์ออกให้ปิดการหยุดชั่วคราวและรันการปิด Rotator ()
นอกจากนี้เราจำเป็นต้องสร้างรายการใหม่ในหน้าและวางไว้ในที่ที่เหมาะสม การใช้วงจรแต่ละ () สำหรับแต่ละสไลด์ (DIV-A ด้วย Class.Slide) สร้างองค์ประกอบช่วงที่อยู่ภายในซึ่งตัวเลขเป็นหมายเลขสไลด์ หมายเลขนี้ใช้ในคุณสมบัติภาพเคลื่อนไหวเพื่อไปที่สไลด์ด้วยหมายเลขนี้ ห่อทุกอย่างใน DIV ด้วยชั้นเรียนที่เหมาะสมและในท้ายที่สุดเราจะได้รับมาร์กอัป:
ดูเหมือนว่าทำไมเราจึงสร้างมาร์กอัปในสคริปต์และไม่ได้อยู่ในรหัส HTML? ความจริงก็คือตัวอย่างเช่นหากสคริปต์ถูกปิด - จะไม่เห็นองค์ประกอบที่จะไม่ทำงานและสิ่งนี้จะไม่แนะนำให้มีความสับสน นอกจากนี้รหัสที่เรียบง่ายซึ่งไม่เลวสำหรับ SEO
เป็นผลให้มาร์กอัปของแถบเลื่อนจะมีลักษณะเช่นนี้ (เป็นสไลด์ฉันใช้ภาพและตั้งค่า 5 ชิ้น):
ด้านล่างคุณสามารถดูว่า Slider JQuery ของเราทำงานอย่างไรในหน้าสาธิตและดาวน์โหลดแหล่งที่จำเป็นทั้งหมด
ในที่สุดช่วงเวลาสองสามช่วงเวลาเกี่ยวกับการรวมตัวเลื่อนนี้กับ Drupal คุณสามารถเพิ่มรหัสนี้ลงในไฟล์เทมเพลตตัวอย่างเช่นใน Page.tpl.php และแนบสคริปต์ไปยังไฟล์ JS แต่ละไฟล์ไปยังหัวข้อ jQuery ใน Drupal เปิดใช้งานโดยค่าเริ่มต้น แต่ทำงานในโหมดความเข้ากันได้ () มีสองการแก้ไข หรือห่อรหัส JS ทั้งหมด:
(ฟังก์ชั่น ($) (// รหัสทั้งหมดของคุณ ... )) (jQuery);
หรือแทนที่สัญลักษณ์ $ ตลอดสคริปต์ jQuery แบบนี้:
jQuery (เอกสาร). Ready (Slide) CSS (("ตำแหน่ง": "Absolute", "Top": "0", "ซ้าย": "0")) ปิดบัง () .eq (0). ); var sliderum \u003d 0; var slideetime; slidecount \u003d jQuery ("# \u200b\u200bslider .slide") ขนาด () var animslide \u003d ฟังก์ชั่น (ลูกศร) (// et.
ในตัวอย่างวิธีแรกถูกนำไปใช้แล้ว
ขอบคุณที่อ่าน! แสดงความคิดเห็นกลับมา และคุณสามารถสมัครสมาชิก RSS เพื่อรับการอัปเดตบล็อกก่อน!
เพิ่ม:นั่นไม่ใช่ทั้งหมด. อ่าน. ที่นั่นเราจะเพิ่มโอกาสใหม่ ๆ ในสคริปต์นี้
