สร้างตัวเลื่อนที่ดีโดยใช้ jQuery ด้วยมือของคุณเอง วิธีสร้างแถบเลื่อนโดยใช้ jQuery วิธีสร้างแถบเลื่อนแบบตอบสนองโดยใช้ CSS3
บางครั้งฉันต้องแก้ไขปัญหาที่เกี่ยวข้องกับส่วนหน้า แม้ว่าฉันจะไม่ชอบก็ตาม :)
ตามความเป็นจริง คุณสามารถประเมินทัศนคติของฉันต่อทุกสิ่งที่เกี่ยวข้องกับ "ความสวยงาม" ได้จากการออกแบบไซต์นี้ ซึ่งพัฒนาโดยฉันคนเดียว :)
อย่างไรก็ตาม เมื่อไม่นานมานี้ ฉันต้องเผชิญกับความจำเป็นในการใช้แถบเลื่อนใน JavaScript และจะต้องดำเนินการนี้โดยไม่มีไลบรารี่สำเร็จรูป และแม้ว่าจะไม่มี jQuery ที่ทุกคนชื่นชอบก็ตาม
ความต้องการนี้เกิดจากข้อเท็จจริงที่ว่าผลลัพธ์ควรเป็นสคริปต์ JS ที่จะเชื่อมต่อกับไซต์ผ่านบริการของบุคคลที่สาม ดังนั้นจึงไม่จำเป็นต้องใช้ภาพหมุนสำเร็จรูปใน JavaScript อีกต่อไปเพราะว่า ในการบูรณาการเข้าด้วยกัน จำเป็นต้องเพิ่มการเชื่อมต่อไลบรารีเข้ากับโค้ด HTML ของไซต์ผ่านแท็กสคริปต์ และคัดลอกไฟล์ด้วยตนเองไปยังเซิร์ฟเวอร์หรือดึงไฟล์เหล่านั้นผ่าน cdn แต่จะต้องแก้ไขโค้ดทรัพยากรอีกครั้ง
วิธีสร้างแถบเลื่อน JavaScript: จุดเริ่มต้นทุกวันนี้ผมคิดว่าทุกคนที่ตกอยู่ในสถานการณ์คล้ายๆ กัน เริ่มต้นด้วยการค้นหาพัฒนาการที่มีอยู่ เพราะ... เมื่องานสร้าง JS carousel อยู่ในขอบเขตของงาน ควรทำโดยเร็วที่สุดเสมอ และภายใต้เงื่อนไขเช่นนี้จะไม่มีใครยอมให้คุณนั่งและประดิษฐ์จักรยานของคุณเองได้
ลูกค้ามักจะไม่สนใจว่าโค้ดจะเขียนอย่างไร สถาปัตยกรรมของมันคืออะไร สิ่งสำคัญคือการเห็นผลลัพธ์!
ตามที่คุณเข้าใจก่อนที่จะเขียนตัวเลื่อนใน JavaScript โดยไม่มี jQuery ฉันตัดสินใจค้นหาตัวเลื่อนสำเร็จรูปและแก้ไขให้เหมาะกับความต้องการของฉัน ทำไมไม่มี jQuery? ใช่ เนื่องจากในทรัพยากรเป้าหมายที่ฉันวางแผนจะเชื่อมต่อแถบเลื่อนผ่านบริการ การเรียก jQuery ในโค้ดนั้นอยู่ช้ากว่าสคริปต์ที่เชื่อมต่อโดยบริการ ดังนั้นโครงสร้าง jQuery ในโค้ดของฉันจึงไม่ถูกรับรู้
โดยพื้นฐานแล้วฉันใช้แถบเลื่อนรูปภาพ JavaScript นี้ - https://codepen.io/gabrieleromanato/pen/pIfoD
ฉันตัดสินใจหยุดอยู่ตรงนั้น เพราะ... รหัส JS ของมันเขียนโดยใช้หลักการ OOP และคลาสของมันนั้นใช้ต้นแบบ ไม่ใช่ฟังก์ชันซ้ำซาก
พูดตามตรง ฉันไม่เข้าใจอย่างลึกซึ้งและไม่รู้จักกระแสนิยมในปัจจุบันเกี่ยวกับ JavaScript โดยใช้ OOP เฟรมเวิร์ก และสถาปัตยกรรมอื่นๆ ในภาษาที่เดิมตั้งใจให้เป็นภาษาสคริปต์ไดนามิกแบบง่ายๆ เช่นเดียวกับ JS เอง ฉันไม่ชอบมันอย่างตรงไปตรงมากับ vinaigrette ทางวากยสัมพันธ์ซึ่งทำให้สามารถเขียนโครงสร้างเดียวกันได้หลายวิธี
แต่น่าเสียดาย ในโลกสมัยใหม่ มีเพียงไม่กี่คนที่แบ่งปันจุดยืนของฉัน เพราะ... ภาษานี้กำลังพัฒนาอย่างรวดเร็วและยังพยายามเอาชนะใจนักพัฒนาแบ็กเอนด์โดยใช้ Node.js เป็นทางเลือกแทน Java, PHP, C#, Ruby และสัตว์ประหลาดอื่นๆ
ด้วยเหตุนี้ เพื่อไม่ให้ถูกทิ้งไว้โดยไม่มีงานทำ คุณต้องเข้าใจ JavaScript อย่างเงียบๆ และในการใช้งานแถบเลื่อน JavaScript ล้วนๆ ที่ฉันเลือก ฉันพบบางสิ่งที่ตามที่คุณเข้าใจ ฉันดูถูกในภาษานี้ นั่นเป็นเหตุผลที่ฉันเลือกมัน เพื่อว่าอย่างน้อยก็มีเหตุผลบางอย่างในการทำงานและเข้าใจ JavaScript OOP และคลาสต้นแบบ - ไม่เช่นนั้นฉันจะไม่มีวันสัมผัสพวกเขาโดยสมัครใจในชีวิต :)
จากโค้ดที่ฉันพบ ฉันต้องพัฒนาแถบเลื่อนใน JS ล้วนๆ ในหน้าต่างป๊อปอัป (สิ่งนี้เรียกอีกอย่างว่าป๊อปอัป ป๊อปอัป ฯลฯ) ซึ่งจะมีปุ่มสำหรับสลับสไลด์และตัวบ่งชี้ที่คลิกได้ของกระแส สไลด์ จำเป็นต้องสร้างปุ่มเพื่อปิดหน้าต่างนี้ด้วย
นี่คือสิ่งที่ฉันลงเอยด้วย
การสร้างไลบรารี่ JS แบบเลื่อนก่อนอื่นฉันตัดสินใจที่จะใช้ทุกอย่างอย่างชาญฉลาดและสร้างแถบเลื่อน JavaScript สำหรับไซต์ในรูปแบบของไลบรารีที่เชื่อมต่อกับไซต์ด้วยสคริปต์เดียวซึ่งจะมีการเรียกส่วนประกอบของแถบเลื่อนซึ่งแบ่งออกเป็นไดเรกทอรีย่อย ฉันตัดสินใจเรียกมันว่า popupSlider.js เพื่อเป็นเกียรติแก่จุดประสงค์ดั้งเดิมของมัน
รหัสของมันสามารถพบได้บน GitHub ตามที่อยู่นี้ - https://github.com/Pashaster12/popupSlider.js
โครงสร้างห้องสมุดเป็นดังนี้:
โฟลเดอร์สไลด์ใช้สำหรับภาพสไลด์ การควบคุมประกอบด้วยรูปภาพของการควบคุมแบบหมุน JS (ปุ่มสำหรับปิดแถบเลื่อนและสลับสไลด์) และในเนื้อหามีองค์ประกอบคงที่ของแถบเลื่อน JS: มาร์กอัป HTML และไฟล์ที่มีสไตล์ CSS
ไฟล์ popupSlider.js เป็นหัวใจของไลบรารีซึ่งมีการเขียนการดำเนินการ JavaScript ของภาพหมุนและสร้างการเชื่อมต่อกับไฟล์อื่น ๆ นี่คืออันที่เราจะเชื่อมต่อบนเว็บไซต์และจะเรียกอันอื่น
ฉันตัดสินใจเริ่มต้นด้วยมาร์กอัป HTML ของภาพหมุน JS ของเรา ซึ่งในกรณีของฉันมีลักษณะดังนี้:
ข้อความ 1 
ข้อความ 2 
ข้อความ 3
ในการออกแบบแถบเลื่อนใน JavaScript เป็นป๊อปอัป ฉันใช้สไตล์ต่อไปนี้:
#slider ( ระยะขอบ: อัตโนมัติ; ความกว้าง: 600px !สำคัญ; ล้น: ซ่อนไว้; ) #slider-wrapper ( กว้าง: 9999px; ความสูง: 343px; ตำแหน่ง: ญาติ; การเปลี่ยนแปลง: ซ้าย 400ms เชิงเส้น; ) .slide ( ลอย: ซ้าย; ความกว้าง : 600px; ตำแหน่ง: ล้น: ซ่อน; .caption (ความกว้าง: 600px; ความสูง: 110px; ความสูงบรรทัด: 1.5; ขนาดตัวอักษร: 15px; น้ำหนักแบบอักษร: 300; การจัดตำแหน่งข้อความ: กึ่งกลาง; สี: # 000; จอแสดงผล: ตาราง; ) .caption-container ( จอแสดงผล: ตารางเซลล์; แนวตั้ง: กลาง; การขยาย: 0 20px; ) #slider-nav ( ตำแหน่ง: สัมบูรณ์; ด้านล่าง: -36px; การจัดตำแหน่งข้อความ: กึ่งกลาง; ซ้าย: 50%; แปลง: แปล X(-50%); ) #slider-nav a ( กว้าง: 8px; ความสูง: 8px; ตกแต่งข้อความ: ไม่มี; สี: #000; จอแสดงผล: อินไลน์บล็อก; รัศมีเส้นขอบ: 50% ; ระยะขอบ: 0 5px; สีพื้นหลัง: #fafafa; ) #slider-nav a.current ( สีพื้นหลัง: #337ab7; ) .horizontal-controls ( ตำแหน่ง: สัมบูรณ์; จอแสดงผล: inline-block; ความกว้าง: 12px ; ความสูง : 20px; ด้านบน: 50%;
ซ้าย: -40px; ) #prev:hover ( พื้นหลัง: url(../controls/arrow_left_active.png); ) #next ( พื้นหลัง: url(../controls/arrow_right_inactive.png); ขวา: -40px; ) #next:hover ( พื้นหลัง : url(../controls/arrow_right_active.png); #cq-popup ( width: 600px; z-index: 23; left: calc(50%); top: calc(50%); ตำแหน่ง: คงที่ !สำคัญ ; ทำซ้ำพื้นหลัง: ไม่ซ้ำ; สีพื้นหลัง: #fff; ตระกูลแบบอักษร: "Roboto", "Segoe UI", "Helvetica", "Georgia", "Calibri", "Verdana" ; %, -50%) สเกล (1); #cq-popup .header ( จอแสดงผล: inline-block; ขนาดตัวอักษร: 17px; น้ำหนักตัวอักษร: 500; ) #cq-popup > div ( ความกว้าง: 500px; font- ขนาด: 22px; line-height: 36px; ) #cq-popup-btclose ( ตกแต่งข้อความ: ไม่มี; ตำแหน่ง: สัมบูรณ์; ขวา: -40px; ด้านบน: 0; พื้นหลัง: url(. ./controls/btn_delete_inactive.png) ; ความสูง: 16px; ความกว้าง: 16px; ) #cq-popup-btclose:hover ( พื้นหลัง: url(../controls/btn_delete_active.png); ) #cq-popup-bg ( ตำแหน่ง : คงที่; ความกว้าง: 100%;
ฉันย้ายทั้งมาร์กอัป HTML และสไตล์ CSS ไปยังไฟล์แยกกัน popupSlider.html และ popupSlider.css ซึ่งอยู่ในไดเรกทอรีทรัพย์สินของไลบรารีตัวเลื่อน JavaScript ฉันทำสิ่งนี้โดยตั้งใจเพื่อให้เมื่อใช้โค้ดนี้ ผู้ใช้สามารถปรับมาร์กอัปและการออกแบบได้อย่างง่ายดายโดยไม่ต้องยุ่งกับโค้ด JS โดยที่สิ่งที่จะต้องเขียนจะต้องเขียนโดยตรง
นอกจากนี้ หลายๆ คนยังต้องการย่อขนาด JS ให้เล็กที่สุดเพื่อเพิ่มความเร็วในการโหลดไซต์ ดังนั้นจึงเป็นเรื่องยากมากที่จะปรับแต่งโซลูชันนี้ภายใต้เงื่อนไขที่ระบุ
ด้วยเหตุนี้ฉันจึงตัดสินใจรวมไฟล์สำเร็จรูปไว้ในไฟล์ไลบรารีหลัก popupSlider.js ซึ่งสำหรับงานของฉันอยู่ในรูปแบบต่อไปนี้:
ตัวเลื่อนฟังก์ชัน(องค์ประกอบ) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll ("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); el.querySelector("#prev"); ) ( var self = สิ่งนี้; สำหรับ (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "บล็อก";< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
อย่างอื่นถ้า (ดัชนี == 1) this.prevBtn.style.display = "ไม่มี";
), setCurrentLink: ฟังก์ชั่น (ลิงก์) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j
ความคิดเห็นเล็กน้อยเกี่ยวกับโค้ดข้างต้น เนื้อหาของไฟล์ popupSlider.js เป็นคลาส JavaScript Slider เดียว ซึ่งมี Constructor และเมธอดคลาส เช่นเดียวกับใน PHP เฉพาะใน JS เท่านั้นที่จำเป็นต้องมีคำจำกัดความของ Constructor ซึ่งต่างจาก PHP
ตัวสร้างถูกกำหนดโดยใช้โครงสร้างต่อไปนี้:
ฟังก์ชั่น Slider(องค์ประกอบ) ( // รหัสตัวสร้าง)
ภายใน Constructor จะต้องระบุการกระทำที่จะดำเนินการเมื่อสร้างคลาสอ็อบเจ็กต์
วิธีการเรียนจะอยู่ภายในต้นแบบและจะพร้อมใช้งานสำหรับทุกอินสแตนซ์ของคลาส JavaScript นี้ ต้นแบบ JS ในกรณีของฉันอธิบายโดยการออกแบบต่อไปนี้:
Slider.prototype = ( //วิธีการ )
พวกเขาจะถูกเรียกนอกเนื้อหาของชั้นเรียนดังนี้:
ตัวเลื่อน Var = ตัวเลื่อนใหม่ (); เลื่อน.class_method();
และภายในรหัสชั้นเรียนเองก็มีวิธีดังต่อไปนี้:
ตัวเอง=สิ่งนี้; self.class_method(); //เพื่อเข้าถึงวิธีการที่สูงกว่าโค้ดของวิธีการที่อธิบายไว้หนึ่งระดับ
ดูเหมือนว่าฉันจะพูดถึงความแตกต่างของการเขียนโค้ดทั้งหมด ต่อไปนี้เป็นคำไม่กี่คำเกี่ยวกับวิธีการของคลาส JavaScript ของเรา ซึ่งมีคำอธิบายของการดำเนินการ JS ของภาพหมุน
โหลดคงที่()
วิธีแรกสุดที่เรียกว่าเมื่อสร้างอินสแตนซ์ของคลาสในตัวสร้าง รับผิดชอบในการเพิ่มมาร์กอัปตัวเลื่อนและไฟล์ที่มีสไตล์ให้กับโค้ด HTML ของหน้าเว็บไซต์
ขั้นแรก แท็กลิงก์ใหม่จะถูกสร้างขึ้นในหน่วยความจำโดยใช้ฟังก์ชัน JavaScript document.createElement() และค่าของแอตทริบิวต์ที่จำเป็นทั้งหมดได้รับการกำหนดให้กับแท็กดังกล่าว รวมถึงเส้นทางไปยังไฟล์ CSS ที่มีลักษณะแถบเลื่อน JS และสุดท้าย มันถูกเพิ่มลงในหน้า HTML โดยใช้เมธอด JavaScript appendChild() ที่ส่วนท้ายของส่วนหัว ซึ่งสไตล์ควรเป็น
ต่อไป เราทำเช่นเดียวกันกับไฟล์ที่มีมาร์กอัป HTML ของแถบเลื่อนของเราใน JavaScript ล้วนๆ มีข้อแม้เล็กน้อย: คุณไม่สามารถรวมไฟล์ HTML ไว้ในไฟล์เดียวกันได้เหมือนกับที่เราทำกับไฟล์ CSS มีห้องสมุดพิเศษสำหรับสิ่งนี้ เช่น เพื่อรวม HTML ใน HTML lib จาก w3.org นั้นยอดเยี่ยม - https://www.w3schools.com/howto/howto_html_include.asp
แต่จะต้องรวมไว้ในไลบรารีตัวเลื่อนหรือขอให้ผู้ใช้ติดตั้งด้วยตนเอง แต่ทั้งหมดนี้กลับไม่เหมาะนัก เพราะ... ต้องใช้การเคลื่อนไหวร่างกายเป็นจำนวนมากและทำให้ความเร็วในการโหลดไซต์ช้าลงเนื่องจากมีสคริปต์เพิ่มเติม
ท้ายที่สุด ฉันตัดสินใจนำเนื้อหาของไฟล์ HTML ไปไว้ในโค้ด JavaScript และโหลดลงในองค์ประกอบ div ใหม่ที่สร้างขึ้นในหน่วยความจำ เช่นเดียวกับที่ฉันทำก่อนหน้านี้เพื่อรวมไฟล์ CSS ใน JavaScript องค์ประกอบที่สร้างขึ้นจะรวมอยู่ที่ส่วนท้ายสุดของส่วนเนื้อหาของโค้ด HTML ของหน้าไซต์
หากคุณต้องการแทรก div ด้วยมาร์กอัปตัวเลื่อน ไม่ใช่แค่ที่ส่วนท้ายของเนื้อหา แต่ในคอนเทนเนอร์เฉพาะ คุณสามารถใช้โค้ดต่อไปนี้แทน:
var div = document.createElement("div"); div.innerHTML = ตัวเลื่อนHTML; document.body.appendChild(div);
ป้อนข้อมูลต่อไปนี้ โดยระบุตัวระบุที่ต้องการของคอนเทนเนอร์เป้าหมาย (ในกรณีของฉัน แถบเลื่อน HTML JS จะอยู่ในองค์ประกอบที่มีรหัส popupSlider):
เป้าหมาย Var = document.querySelector("#popupSlider"); target.innerHTML = ตัวเลื่อนHTML;
วิธีการที่เรียกว่าในตัวสร้างหลังจาก loadStatic() เป็นสิ่งจำเป็นในการเริ่มต้นคุณสมบัติคลาสที่สอดคล้องกับองค์ประกอบ HTML หลักที่เราจะเข้าถึงในโค้ดต่อไปนี้
ในตอนท้ายจะเรียกเมธอด Navigator()
นำทาง()
ในวิธีนี้ การกระทำที่เกิดขึ้นเมื่อคุณคลิกที่ปุ่มสวิตช์สไลด์และองค์ประกอบการนำทางที่อยู่ใต้ตัวเลื่อนนั้นจะถูกระบุในรูปแบบของวงกลม
เพื่อความสะดวก ฉันย้ายโค้ด JavaScript สำหรับการเปลี่ยนสไลด์ไปเป็นเมธอด slide() แยกกัน แต่ในวิธีนี้ ฉันแค่แนบมันเข้ากับเหตุการณ์การคลิกสำหรับปุ่มกลมแต่ละปุ่มในลูป
เมื่อคุณคลิกที่ปุ่ม "สไลด์ก่อนหน้า" / "สไลด์ถัดไป" อย่างที่คุณเห็นฉันตัดสินใจจำลองการคลิกบนวงกลมที่เกี่ยวข้องโดยกำหนดวงกลมที่ต้องการโดยสัมพันธ์กับวงกลมปัจจุบันซึ่งมีคลาส CSS ในปัจจุบัน
สไลด์ (องค์ประกอบ)
วิธีการ “รับผิดชอบความมหัศจรรย์” ของ JavaScript carousel ซึ่งมีโค้ดที่เปลี่ยนตำแหน่งของสไลด์ ในตอนเริ่มต้น จะมีการเรียกเมธอด setCurrentLink() ซึ่งเราจะพูดถึงในภายหลัง
วัตถุปุ่มนำทางตัวเลื่อน JS ในรูปแบบของวงกลมจะถูกส่งผ่านไปเป็นพารามิเตอร์อินพุต
สวิตช์เลื่อนนั้นทำงานดังนี้:
ในตอนท้ายของวิธีการ มีการอธิบายลักษณะการทำงานของปุ่ม "สไลด์ก่อนหน้า"/"สไลด์ถัดไป" ซึ่งออกแบบเป็นลูกศรซ้าย/ขวาตามลำดับ หากสไลด์ปัจจุบันเป็นสไลด์แรกจากรายการทั้งหมด ปุ่มเพื่อไปยังสไลด์ก่อนหน้าจะถูกซ่อนไว้ หากเป็นอย่างหลังให้ถอดปุ่มออกเพื่อเลื่อนไปยังสไลด์ถัดไป
setCurrentLink(ลิงค์)
เมธอดของคลาสตัวเลื่อน JavaScript นี้มีหน้าที่เน้นปุ่มกลมการนำทางที่สอดคล้องกับองค์ประกอบปัจจุบัน เหล่านั้น. หากเราเลือกสไลด์ที่สอง ปุ่มที่สองจะถูกไฮไลต์
วัตถุของปุ่มที่ควรเลือกเป็นวัตถุปัจจุบันจะถูกส่งผ่านเป็นพารามิเตอร์อินพุตไปยังฟังก์ชัน
ตรรกะในการเน้นองค์ประกอบปัจจุบันนั้นง่ายมาก:
วิธีการสุดท้ายของคลาสซึ่งกำหนดการดำเนินการเมื่อคลิกปุ่มปิดของแถบเลื่อนในรูปแบบของกากบาท ที่จริงแล้ว โค้ดนี้เป็นโค้ดที่เข้าใจได้มากที่สุดในบรรดาโค้ดทั้งหมดที่มีอยู่ในคลาสตัวเลื่อน JS
เมื่อคุณคลิกที่ปุ่มปิด ซึ่งเข้าถึงได้โดยตัวระบุ องค์ประกอบตัวเลื่อนและองค์ประกอบที่กำหนดพื้นหลังโปร่งแสงจะถูกลบออกจากหน้า ในทางกลับกัน พวกมันยังได้รับจากตัวระบุที่ไม่ซ้ำกันอีกด้วย
วิธีการนี้ถูกเรียกภายใน Navigate() ที่อธิบายไว้ก่อนหน้านี้ ซึ่งมีสถานการณ์การดำเนินการทั้งหมดที่เกิดขึ้นบนแถบเลื่อน JavaScript ของเรา
อย่างไรก็ตาม หากคุณต้องการปิดแถบเลื่อนเมื่อคุณคลิกด้านนอก ให้เพิ่มโค้ดต่อไปนี้ลงในวิธีนี้:
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
การนำเสนอภาพนิ่ง JavaScript ตามไลบรารีที่พัฒนาขึ้นบางครั้งในทางปฏิบัติคุณอาจต้องสร้างภาพหมุนการเลื่อน JS ซึ่งมักเรียกว่าการนำเสนอภาพนิ่ง ในกรณีของฉัน สิ่งนี้ไม่จำเป็น แต่ฉันยังคงตัดสินใจสร้างมันขึ้นมาตามโค้ดไลบรารีสุดท้ายสำหรับกรณีที่มันอาจจะมีประโยชน์
ในความเป็นจริง การใช้งาน JavaScript ของการนำเสนอภาพนิ่งแตกต่างจากแถบเลื่อนปกติเล็กน้อย ข้อแตกต่างเพียงอย่างเดียวคือในการนำเสนอสไลด์ สไลด์จะสลับโดยอัตโนมัติในช่วงเวลาที่กำหนด ในขณะที่ในกรณีของภาพหมุน JS ปกติ สไลด์จะเปลี่ยนด้วยตนเองโดยใช้องค์ประกอบการนำทาง
สไลด์โชว์: ฟังก์ชั่น (หมดเวลา) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute ("ข้อมูลสไลด์"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector(""));
ฉันคิดว่ามันชัดเจนว่าเกิดอะไรขึ้นที่นี่ ในการสร้างวิธีการนี้ ฉันคัดลอกโค้ดจากเหตุการณ์คลิกของปุ่มสไลด์แบบแมนนวล และวางไว้ในการเรียก JavaScript ไปยังฟังก์ชัน setInterval() ซึ่งดำเนินการตามที่ระบุหลังจากระยะเวลาที่กำหนด
สคริปต์การกระทำจะถูกส่งผ่านเป็นอาร์กิวเมนต์แรกในฐานะฟังก์ชันที่ไม่ระบุชื่อ และช่วงเวลาจะถูกส่งผ่านเป็นวินาที ซึ่งฉันตัดสินใจสร้างเป็นตัวแปรที่มีค่าจะถูกส่งเมื่อเรียก SlideShow()
การแก้ไขโค้ดภายใน setInterval() เพียงอย่างเดียวที่จำเป็นคือการกำหนดจำนวนสไลด์และเปรียบเทียบดัชนีของสไลด์ปัจจุบันกับสไลด์ปัจจุบันเพื่อวนลูปการสลับอัตโนมัติ
เพื่อให้โค้ดนี้ใช้งานได้ต้องเรียกเมธอดนั้นเอง ฉันตัดสินใจทำทั้งหมดนี้ด้วยการนำทางเดียวกัน () ซึ่งเป็นชุดของสคริปต์ทุกประเภทอย่างแม่นยำ ฉันวางสายที่ตอนท้ายสุด โดยส่งผ่านค่าของช่วงเวลาสำหรับการเปลี่ยนสไลด์โดยอัตโนมัติในการนำเสนอสไลด์ JS ของเราเป็นอาร์กิวเมนต์ (ฉันเลือก 2,000 มิลลิวินาทีหรือ 2 วินาที คุณสามารถเปลี่ยนตัวเลขนี้ได้ตามความจำเป็น):
ตนเอง.slideShow(2000);
หลังจากนั้นให้ตรวจสอบการทำงานของแถบเลื่อน JavaScript อย่าลืมทำความสะอาดเบราว์เซอร์ของคุณ
ตามทฤษฎีแล้วทุกอย่างควรจะได้ผล ถ้าไม่เช่นนั้น ให้ศึกษาข้อผิดพลาดในคอนโซลของเบราว์เซอร์และแบ่งปันในความคิดเห็น
เป็นผลให้เราได้รับการนำเสนอภาพนิ่ง JS ซึ่งสไลด์สลับโดยอัตโนมัติและเป็นวงกลมเช่น เมื่อถึงสไลด์สุดท้าย การแสดงจะเข้าสู่ลูปใหม่และการแสดงจะเริ่มต้นอีกครั้งจากองค์ประกอบแรกสุด
เมื่อทำงานกับไลบรารี JS ต่างๆ สำหรับภาพหมุนและบทวิจารณ์ ฉันสังเกตเห็นว่านักพัฒนาใช้แนวทางปฏิบัตินี้อย่างจริงจัง แต่มีข้อเพิ่มเติมบางประการ ในวิธีแก้ปัญหาทั้งหมดที่ฉันเห็น การแสดงสไลด์อัตโนมัติจะถูกขัดจังหวะหากผู้ใช้ทำการสลับด้วยตนเอง ดังนั้นฉันจึงตัดสินใจทำแบบเดียวกันในห้องสมุดของฉัน
เพื่อขัดจังหวะการแสดงสไลด์ JavaScript แบบหมุนโดยอัตโนมัติ ฉันตัดสินใจใช้ฟังก์ชัน JS มาตรฐาน clearInterval() ซึ่งฉันจะส่งผ่านเป็นอาร์กิวเมนต์ซึ่งเป็นตัวระบุช่วงเวลาที่ส่งคืนโดยฟังก์ชัน setInterval() เมื่อตั้งค่าไว้
เป็นผลให้ฉันได้รับโค้ดต่อไปนี้ ซึ่งฉันตัดสินใจไม่เขียนเป็นวิธีการแยกต่างหาก:
ClearInterval(self.slideCycle);
และวางไว้ในตำแหน่งที่มีการอธิบายการกระทำเมื่อคลิกองค์ประกอบการนำทางต่างๆ เช่น ดังต่อไปนี้:
Link.addEventListener("คลิก", function (e) (...)); self.prevBtn.addEventListener("คลิก", ฟังก์ชั่น (e) (...)); self.nextBtn.addEventListener("คลิก", ฟังก์ชั่น (e) (...));
เป็นการดีกว่าที่จะเรียก clearInterval() ให้ใกล้กับเหตุการณ์การคลิกมากขึ้น สิ่งสำคัญคืออยู่ข้างหน้า ไม่ใช่อยู่ข้างหลัง
การรวมตัวเลื่อน JavaScript บนเว็บไซต์ดังนั้นแถบเลื่อนของเราใน JS บริสุทธิ์ก็พร้อมแล้ว ตอนนี้สิ่งที่เหลืออยู่ก็คือการเชื่อมต่อกับไซต์
ในการดำเนินการนี้ คุณต้องดำเนินการขั้นตอนต่อไปนี้ตามลำดับ ซึ่งเป็นการดำเนินการมาตรฐานเมื่อรวมไลบรารี JavaScript ของบริษัทอื่นโดยทั่วไป
ขั้นตอนที่ 1 เราคัดลอกไฟล์ไลบรารีไปยังเว็บไซต์ของเราในไดเร็กทอรีแยกต่างหาก
ขั้นตอนที่ 2 เพิ่มโค้ดต่อไปนี้ลงใน HTML ของหน้าที่จะต้องแสดงแถบเลื่อน โดยวางไว้หน้าแท็กปิดเนื้อหา:
ขั้นตอนที่ 3 เราวางโค้ดต่อไปนี้สำหรับการเรียก JS carousel ในไฟล์ JavaScript ที่มีอยู่ ซึ่งรวมอยู่ในเพจหลังจากเชื่อมต่อแถบเลื่อนแล้ว:
Var aSlider = ตัวเลื่อนใหม่("#slider");
อย่างที่คุณเห็น โค้ดนี้โดยพื้นฐานแล้วเป็นการสร้างอ็อบเจ็กต์ของคลาส Slider ซึ่งมีอยู่ใน popupSlider.js นั่นคือเหตุผลที่ควรเรียกหลังจากเชื่อมต่อไฟล์คลาสเข้ากับเพจแล้วเท่านั้น
การเพิ่มสไลด์ใหม่ให้กับม้าหมุน JavaScriptทุกอย่างง่ายมากที่นี่ เนื่องจากสไลด์ของเรานำมาจากไดเร็กทอรีแยกต่างหากของไลบรารีสไลด์ เมื่อเพิ่มรูปภาพใหม่ คุณเพียงแค่ต้องโยนไฟล์ที่จำเป็นลงไป โดยกำหนดขนาดให้เท่ากับขนาดอื่นๆ ก่อน
จากนั้นในโค้ดของไฟล์ Assets/popupSlider.html ให้เพิ่มบล็อกใหม่ลงในคอนเทนเนอร์ด้วย id slider-wrapper :
ข้อความ
โดยหลักการแล้ว คุณสามารถคัดลอกสิ่งที่มีอยู่ที่คล้ายกันและเปลี่ยนเส้นทางไปยังไฟล์รูปภาพและข้อความของลายเซ็นได้ (หากจำเป็นเลย)
คุณจะต้องเพิ่มองค์ประกอบการนำทางใหม่ในรูปแบบของวงกลม เนื่องจาก... ในขณะนี้ ยังไม่มีการใช้การเพิ่มอัตโนมัติ ในการดำเนินการนี้ คุณจะต้องเพิ่มโค้ดต่อไปนี้ลงในคอนเทนเนอร์ด้วยรหัส Slider-nav โดยเขียนไว้ที่ส่วนท้ายสุด:
ค่าของแอตทริบิวต์ data-slide ต้องมากกว่าค่าที่ใหญ่ที่สุดขององค์ประกอบอื่นๆ แค่เพิ่มกระแสสูงสุดทีละอันก็เพียงพอแล้ว
บรรจุ JS carousel ไว้ในสคริปต์เดียวเพียงเท่านี้ แถบเลื่อน JavaScript ก็พร้อมและเชื่อมต่อแล้ว ฉันแนะนำให้ใช้ตัวเลือกนี้เป็นการส่วนตัวหากคุณต้องการเลย :)
เพื่อเร่งความเร็วในการทำงานคุณสามารถบีบอัดส่วนประกอบคงที่เพิ่มเติมได้: ไฟล์ CSS, HTML และ JavaScript ฉันไม่ได้ทำเช่นนี้และเสนอโค้ดย่อส่วนให้กับคุณ เนื่องจากขณะนี้มีระบบสร้างส่วนหน้าจำนวนมาก: Gulp, Grunt, Webpack และอื่นๆ และแต่ละอันก็มีอัลกอริธึมของตัวเองสำหรับการบีบอัดและเชื่อมต่อไฟล์
นอกจากนี้ ผลลัพธ์ที่ย่อขนาดอาจทำงานแตกต่างกันใน OS ที่แตกต่างกัน โดยทั่วไปมีสาเหตุหลายประการ
และฉันคิดว่าซอร์สโค้ดเองก็ไม่ได้หนักมากจนต้องใช้ขั้นตอนนี้ แต่ถ้าคุณต้องการ ให้กำหนดค่าการย่อขนาดด้วยตัวเอง โดยคำนึงถึงระบบปฏิบัติการและตัวสะสมของคุณ
ตามที่ฉันเขียนไว้ตอนเริ่มต้น เพื่อที่จะแก้ปัญหางานที่ตั้งไว้ในตอนแรก ฉันจำเป็นต้องได้รับไฟล์ JS ไฟล์เดียวสำหรับการใช้งานแถบเลื่อนของฉันอย่างถูกต้องผ่านบริการของบุคคลที่สามบนไซต์ ด้วยเหตุนี้ฉันจึงไม่ได้ใช้ไลบรารีของบุคคลที่สามสำเร็จรูป
ตัวเลือกของสคริปต์แบบหมุน JavaScript เดียวจะมีประโยชน์สำหรับคุณ เพราะ... เนื้อหาทั้งหมดจะรวมอยู่ในนั้นโดยตรง รวมถึงโค้ด HTML/CSS ซึ่งในกรณีของไลบรารีจะถูกจัดเก็บไว้ในไฟล์แยกกัน
สคริปต์ในกรณีของฉันประกอบด้วยสองส่วน ส่วนแรกประกอบด้วยเนื้อหาของไฟล์ popupSlider.js ซึ่งฉันจะไม่นำเสนอเป็นครั้งที่สอง ใส่ด้วยตัวเอง โดยลบคำอธิบายของเมธอด loadStatic() และการเรียกออกจากโค้ดคลาส เนื่องจาก เราจะไม่ต้องการพวกเขา
ส่วนที่สองของสคริปต์ตัวเลื่อน JavaScript เดียวสำหรับไซต์คือตัวจัดการสำหรับเหตุการณ์ DOMContentLoaded ซึ่งเกิดขึ้นเมื่อเนื้อหาของหน้าถูกโหลด
ที่นั่นเราจะเพิ่มโค้ด JS แบบหมุนลงในหน้า HTML/CSS และสร้างออบเจ็กต์ของคลาส Slider ซึ่งเทียบเท่ากับการเปิดใช้งานตัวเลื่อนเอง
โค้ดตามแผนผังมีลักษณะดังนี้:
/* เนื้อหาของ popupSlider.js โดยไม่ต้องอธิบายเมธอด loadStatic() และการเรียก */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*css code*/ \ /* html code * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = ตัวเลื่อนใหม่ ("#slider");
เนื่องจากในกรณีของฉัน ตัวเลือกในการอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ถูกปิดโดยสิ้นเชิง ฉันจึงต้องอัปโหลดไฟล์รูปภาพของตัวควบคุมแบบหมุน JavaScript ไปยังคลาวด์ และแทนที่จะเขียนเส้นทางไปยังไฟล์เหล่านั้นในโค้ด HTML และ CSS ให้เขียนลิงก์ที่สร้างขึ้นเมื่อ ประหยัด.
หากคุณไม่มีปัญหาดังกล่าว คุณไม่จำเป็นต้องเปลี่ยนแปลงอะไรเลย แต่อย่าลืมคัดลอกสไลด์และไดเร็กทอรีไลบรารีการควบคุมไปยังเซิร์ฟเวอร์และระบุเส้นทางที่ถูกต้องไปยังสไลด์เหล่านั้น
ตัวเลื่อน JS แบบกำหนดเอง - โอกาสในการพัฒนาพูดตามตรง ฉันไม่ได้วางแผนที่จะมีส่วนร่วมในการสนับสนุนแบบกำหนดเป้าหมายและพัฒนาโซลูชันที่ฉันสร้าง :) ในขณะนี้ มีแถบเลื่อนที่คล้ายกันจำนวนหนึ่งและรถเข็นขนาดเล็กซึ่งมีประวัติเป็นของตัวเองต่างจากฉัน ผ่านการทดสอบอย่างละเอียดและได้รับการสนับสนุนจากชุมชนผู้ใช้และนักพัฒนาจำนวนมาก
มันไม่น่าสนใจเลยสำหรับฉันที่จะเริ่มต้นการเดินทางทั้งหมดนี้ตั้งแต่เริ่มต้นเพียงลำพังแล้วสร้างมอเตอร์ไซค์คันใหม่ขึ้นมา และฉันก็ไม่มีเวลาสำหรับมันจริงๆ แต่ในทางกลับกัน แถบเลื่อน JavaScript นี้เป็นโอกาสที่ดีเยี่ยมในการฝึกฝนการพัฒนาโดยการปรับโครงสร้างโค้ดใหม่และใช้ฟังก์ชันใหม่ๆ ที่น่าสนใจซึ่งอาจยังไม่มีอยู่จริง
ดังนั้น หากคุณเช่นฉัน ต้องการฐานโค้ดสำหรับการทดลอง และคุณมีเวลาว่างเพิ่มขึ้นเป็นอย่างน้อย ให้คัดลอกโค้ดของแถบเลื่อน JavaScript ที่ฉันอธิบายไว้ หรือเข้าร่วมผู้ร่วมให้ข้อมูลบน GitHub พื้นที่เก็บข้อมูลเปิดอยู่ และฉันได้ให้ลิงก์ไปยังพื้นที่เก็บข้อมูลนั้นไว้ที่ตอนต้นของบทความ
หากคุณต้องการพัฒนาทักษะส่วนหน้าในการสร้างสรรค์ของฉัน ฉันยังสามารถให้รายการการแก้ไขและปรับปรุงเล็กๆ น้อยๆ ที่โค้ดต้องการและซึ่งอาจเป็นที่สนใจของคุณในแง่ของการใช้งาน:
รายการแก้ไขที่ฉันได้ให้ไว้นั้น แน่นอนว่าไม่ใช่ที่สิ้นสุดและสามารถเพิ่มเติมได้ เขียนเกี่ยวกับข้อเสนอแนะ ความคิด และความปรารถนาของคุณในความคิดเห็นด้านล่างบทความ และแบ่งปันกับเพื่อนของคุณผ่านเครือข่ายโซเชียลเพื่อให้พวกเขามีส่วนร่วมในการพัฒนาด้วย
ฉันขอให้คุณอย่าตัดสินโค้ดของฉันอย่างเคร่งครัด เพราะอย่างที่ฉันบอกไปแล้ว ฉันไม่คิดว่าตัวเองเป็นผู้เชี่ยวชาญส่วนหน้าและไม่ใช่ ฉันยังเปิดรับฟังความคิดเห็นทั้งหมดของคุณเกี่ยวกับรูปแบบการเขียนโค้ด และหวังว่าฉันจะได้เรียนรู้บางอย่างจากคุณ และจากฉัน เช่น ตอบสนองวัตถุประสงค์หลักในการพัฒนาและสนับสนุนผลิตภัณฑ์ OpenSource
เข้าร่วมชุมชนโครงการ สมัครรับข้อมูลอัปเดต และคุณยังสามารถช่วยฉันทางการเงินโดยใช้แบบฟอร์มใต้บทความได้ หากฉันสามารถช่วยคุณในบางสิ่งบางอย่างหรือคุณเหมือนกับสิ่งที่ฉันทำ :)
ฉันมีทุกอย่าง! ขอให้ดีที่สุด!
เมื่อไม่นานมานี้ ฉันเริ่มเรียน jQuery ฉันคิดว่าทุกคนรู้ดีว่านี่คือชื่อของไลบรารี่ยอดนิยมสำหรับการพัฒนาและสร้างสคริปต์ใน JavaScript ด้วยความช่วยเหลือของมัน มันง่ายมากที่จะสร้างองค์ประกอบเว็บไซต์ที่น่าตื่นตาตื่นใจและโต้ตอบได้
ในบทความนี้ ฉันอยากจะบอกวิธีสร้างแถบเลื่อนสากลอย่างง่ายโดยใช้ jQuery ในความเป็นจริงมีแถบเลื่อนสำเร็จรูปที่แตกต่างกันจำนวนมากบนอินเทอร์เน็ตซึ่งบางครั้งดูน่าดึงดูดมากและใช้งานได้ค่อนข้างดี แต่เราจะสร้างมันขึ้นมาใหม่ตั้งแต่ต้น
ดังนั้นคุณสมบัติใดของแถบเลื่อน jQuery ของเรา (ซึ่งฉันเรียกว่า HWSlider) ที่สามารถสังเกตได้?
- ใช้งานง่ายและออกแบบ - ฉันต้องการสร้างสคริปต์ง่ายๆ โดยไม่ต้องยุ่งยาก ดังนั้นฉันจึงไม่ได้ใช้ภาพเคลื่อนไหว CSS3 และโค้ดกลับกลายเป็นว่ามีความหลากหลายและเข้าใจได้มาก
- ความสามารถในการแทรกทั้งรูปภาพและโค้ด HTML ลงในสไลด์
- สามารถเลื่อนดูสไลด์ทั้งตามลำดับ (หน้า-หลัง) และเลือกแต่ละสไลด์ได้ (1,2,3,4...)
- ลิงก์ที่สร้างโดยอัตโนมัติ (ก่อนหน้า - ถัดไป และมีหมายเลขสไลด์) คุณเพียงแค่ต้องใส่จำนวน div ที่ต้องการ จากนั้นทุกอย่างจะคำนวณเอง สังเกตได้ว่าจำนวนสไลด์นั้นไม่จำกัด
สคริปต์นี้เข้ากันได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด: IE, Opera, Firefox, Safari, Chrome (เนื่องจากแถบเลื่อนไม่ได้ใช้ CSS3)
เริ่มจากมาร์กอัป HTML กันก่อน ต้องแทรกหน้า HTML หรือเทมเพลตในตำแหน่งที่ต้องการ
นี่คือเนื้อหาของสไลด์ที่ 1 นี่คือเนื้อหาของสไลด์ที่ 2 นี่คือเนื้อหาของสไลด์ที่ 3
อย่างที่คุณเห็น ทุกอย่างเรียบง่ายที่นี่ คุณสามารถแทรกสไลด์ได้มากเท่าที่คุณต้องการโดยการสร้าง div ใหม่ คุณสามารถแทรกโค้ด HTML ใดๆ ไว้ข้างในได้ เช่น รูปภาพหรือกลุ่มข้อความ อย่าลืมรวมไลบรารี jQuery เข้ากับสคริปต์ js ทั้งหมด หากคุณไม่ทราบวิธีการดูตัวอย่าง
#slider-wrap( /* Wrapper สำหรับตัวเลื่อนและปุ่ม */ width:660px; ) #slider( /* Wrapper สำหรับตัวเลื่อน */ width:640px; height:360px; overflow: Hidden; border:#eee solid 10px; ตำแหน่ง:ญาติ; ) .slide( /* Slide */ width:100%; height:100%; ) .sli-links( /* ปุ่มสำหรับเปลี่ยนสไลด์ */ margin-top:10px; text-align:center;) .sli-links . control-slide( margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) ตรงกลางด้านล่าง no- ทำซ้ำ;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( ตำแหน่งพื้นหลัง:center top;) #prewbutton, #nextbutton ( /* ลิงก์ " ถัดไป" และ "ก่อนหน้า" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg .png) ตรงกลางด้านซ้าย ไม่ทำซ้ำ; ความทึบ:0.8; โครงร่าง:ไม่มี !สำคัญ;) #prewbutton(left:10px;) #nextbutton( right:10px; พื้นหลัง:url(arrowBg.png) ตรงกลางด้านขวา ไม่ทำซ้ำ; ) #prewbutton:โฮเวอร์, #ปุ่มถัดไป:โฮเวอร์( ความทึบ:1;)
มาดูรายละเอียดเพิ่มเติมกันดีกว่า ขั้นแรกเราให้บล็อกหลัก ID "slider-wrap" ซึ่งเป็นความกว้างที่ต้องการ เนื่องจากบล็อกอื่นๆ ทั้งหมดถูกแทรกเข้าไป จึงไม่จำเป็นต้องระบุความสูง ขึ้นอยู่กับสิ่งที่อยู่ภายใน จากนั้นเราจำเป็นต้องกำหนดขนาดของคอนเทนเนอร์ที่จะวางสไลด์ไว้ นี่แหละ #สไลเดอร์ กำหนดความกว้างและความสูง รวมถึงเส้นขอบ 10 พิกเซล เป็นต้น ที่นี่ความกว้างคือ 640px ซึ่งน้อยกว่าความกว้างของพาเรนต์ เนื่องจากเราเพิ่มเส้นขอบด้านขวาและด้านซ้ายเป็น 10px ความกว้างของสไลด์ (.slide) ก็ขึ้นอยู่กับความกว้างของ div นี้ด้วย
และสิ่งสุดท้าย: เราต้องกำหนดตำแหน่ง: สัมพันธ์กับคอนเทนเนอร์สไลด์ เนื่องจากสไลด์ด้านในมีตำแหน่งที่แน่นอน สำหรับสไลด์นั้น CSS จะตั้งค่าเฉพาะความกว้างและความสูงเท่านั้น คุณสมบัติที่เหลือถูกตั้งค่าในสคริปต์ jQuery
Selector.sli-links คือบล็อกที่จะมีปุ่มสำหรับเลื่อนไปยังสไลด์ที่ต้องการ ปุ่มเหล่านี้เป็นองค์ประกอบอย่างง่ายของหมายเลขประเภท ซึ่งจะถูกแทรกในปริมาณที่ต้องการโดยอัตโนมัติ พร้อมกับ parent.sli-link สำหรับปุ่ม เราได้กำหนดรูปลักษณ์ที่สวยงาม กล่าวคือ เราสร้างแต่ละปุ่มให้เป็นสี่เหลี่ยมจัตุรัส จัดตำแหน่งปุ่มทั้งหมดให้อยู่ตรงกลาง และยังต้องขอบคุณโอเวอร์โฟลว์: ซ่อนไว้ และเยื้องข้อความ:-9999px เราจึงลบข้อความ เหลือเพียงไอคอนพื้นหลัง ซึ่งจะเปลี่ยนเมื่อวางเมาส์เหนือองค์ประกอบเคอร์เซอร์นี้ด้วย เพื่อความสะดวก ฉันใช้สไปรท์ ซึ่งลดจำนวนรูปภาพ
ถัดไปคือการออกแบบปุ่มที่ใช้งานอยู่ เราเพียงแค่เปลี่ยนตำแหน่งของพื้นหลัง จากนั้นเราจะออกแบบลิงก์ใหม่เพื่อไปยังสไลด์ถัดไปและก่อนหน้า คุณสามารถออกแบบอะไรก็ได้เหมือนกับปุ่มต่างๆ ลิงก์เหล่านี้จะถูกแทรกโดยอัตโนมัติภายใน #slider แต่เพื่อให้มองเห็นได้ ฉันจึงกำหนดตำแหน่งที่แน่นอนและเลเยอร์บนสุด (z-index:3) เพื่อให้พวกมันปรากฏเหนือสไลด์ ฉันคิดว่าทุกอย่างชัดเจนและเรียบง่ายด้วย CSS คุณสามารถเปลี่ยนคุณสมบัติเกือบทั้งหมดเพื่อออกแบบแถบเลื่อนได้ตามที่คุณต้องการ
ตอนนี้เรามาดูสถานการณ์กัน:
เท่ากับ hwSlideSpeed \u003d 700; var hwTimeOut = 3000; var hwNeedLinks = จริง; $(document).ready(function(e) ( $(".slide").css(("position" : "absolute", "top":0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideCount = $("#slider .slide").size(); var animSlide = ฟังก์ชั่น(ลูกศร)( clearTimeout(slideTime); $ (" .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "ถัดไป")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = arrow; ) $(".slide").eq( slideNum) .fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("ใช้งานอยู่") ; if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + ดัชนี + ""; )); $("" + $adderSpan +"").appendTo("#slider-wrap");
$(".control-slide:first").addClass("ใช้งานอยู่");
$(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); ));
ตรรกะหลักของแถบเลื่อน jQuery ของเราคือฟังก์ชัน animSlide ใช้เวลาหนึ่งพารามิเตอร์ หากเราส่งสตริง “next” หรือ “prew” ลงไป ตัวดำเนินการแบบมีเงื่อนไขจะทำงานและสไลด์ถัดไปหรือก่อนหน้าจะแสดงตามลำดับ หากเราส่งตัวเลขเป็นค่า ตัวเลขนี้จะกลายเป็นสไลด์ที่ใช้งานอยู่และจะแสดงขึ้นมา
ดังนั้นฟังก์ชันนี้จะซ่อน div ปัจจุบัน คำนวณอันใหม่และแสดงมัน
โปรดทราบว่าเมธอด .fadeIn() ซึ่งทำให้มองเห็นสไลด์ที่ใช้งานอยู่ ได้รับการกำหนดอาร์กิวเมนต์ที่สอง นี่คือฟังก์ชันการโทรกลับที่เรียกว่า จะดำเนินการเมื่อสไลด์ปรากฏขึ้นโดยสมบูรณ์ ในกรณีนี้ จะทำเพื่อให้แน่ใจว่ามีการเลื่อนสไลด์โดยอัตโนมัติ ฟังก์ชัน rotator ที่กำหนดไว้ด้านล่างจะเรียกใช้ฟังก์ชัน animSlide อีกครั้งเพื่อเลื่อนไปยังสไลด์ถัดไปตามช่วงเวลาที่ต้องการ: เราจะได้การปิดที่ช่วยให้เลื่อนได้อย่างต่อเนื่อง
ทุกอย่างทำงานได้ดี แต่เราจำเป็นต้องหยุดการทำงานอัตโนมัติหากผู้ใช้เลื่อนเคอร์เซอร์ไปที่แถบเลื่อนหรือกดปุ่ม ตัวแปรหยุดชั่วคราวถูกสร้างขึ้นเพื่อจุดประสงค์นี้ หากค่าเป็นบวก - จริง จะไม่มีการสลับอัตโนมัติ เมื่อใช้เมธอด .hover() เราระบุ: ล้างตัวจับเวลาหากกำลังทำงานอยู่ - clearTimeout(slideTime) และตั้งค่า Pause = true และหลังจากเลื่อนเคอร์เซอร์แล้ว ให้ปิดการหยุดชั่วคราวและดำเนินการปิด rotator()
นอกจากนี้ เราจำเป็นต้องสร้างองค์ประกอบใหม่บนเพจและวางไว้ในตำแหน่งที่ถูกต้อง การใช้แต่ละวง () สำหรับแต่ละสไลด์ (div พร้อมคลาส .slide) เราจะสร้างองค์ประกอบการขยายภายในซึ่งมีตัวเลข - จำนวนของสไลด์ หมายเลขนี้ใช้ในฟังก์ชันแอนิเมชันเพื่อย้ายไปยังสไลด์ด้วยหมายเลขนี้ มารวมทุกอย่างไว้ใน div ด้วยคลาสที่จำเป็น และท้ายที่สุดแล้ว เราก็จะได้มาร์กอัปต่อไปนี้:
0 1 2 3
ดูเหมือนว่าทำไมเราถึงสร้างมาร์กอัปภายในสคริปต์ไม่ใช่ในโค้ด HTML ความจริงก็คือตัวอย่างเช่นหากผู้ใช้ปิดใช้งานสคริปต์เขาจะไม่เห็นองค์ประกอบที่ใช้งานไม่ได้และสิ่งนี้จะไม่ทำให้เขาสับสน นอกจากนี้โค้ดยังทำให้ง่ายขึ้นซึ่งดีสำหรับ SEO
ดังนั้นเค้าโครงตัวเลื่อนจะมีลักษณะดังนี้ (ฉันใช้รูปภาพเป็นสไลด์และติดตั้ง 5 รูป):
0
1
2
3
ด้านล่างนี้คุณจะเห็นว่าแถบเลื่อน jQuery ทำงานอย่างไรในหน้าสาธิตและดาวน์โหลดแหล่งข้อมูลที่จำเป็นทั้งหมด
สุดท้ายนี้ มีประเด็นบางประการเกี่ยวกับการรวมแถบเลื่อนนี้เข้ากับ Drupal คุณสามารถเพิ่มโค้ดนี้ลงในไฟล์เทมเพลตได้ เช่น ใน page.tpl.php และแนบสคริปต์เป็นไฟล์ js แยกต่างหากเข้ากับธีม Jquery ใน Drupal เปิดใช้งานตามค่าเริ่มต้น แต่ทำงานในโหมดความเข้ากันได้ () มีสองตัวเลือกสำหรับการปรับปรุง หรือล้อมโค้ด js ทั้งหมด:
(function ($) ( // รหัสทั้งหมดของคุณ... ))(jQuery);
หรือแทนที่สัญลักษณ์ $ ทั่วทั้งสคริปต์ด้วย jQuery แบบนี้:
JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolute", "top": 0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideCount = jQuery("#slider .slide").size(); var animSlide = function(ลูกศร)( // ฯลฯ .
ตัวอย่างได้นำวิธีแรกไปใช้แล้ว
ขอบคุณสำหรับการอ่าน! แสดงความคิดเห็นกลับมาอีกครั้ง คุณยังสามารถสมัครรับ RSS เพื่อรับการอัปเดตบล็อกก่อนได้!
เพิ่ม: นั่นไม่ใช่ทั้งหมด อ่าน. เราจะเพิ่มคุณสมบัติใหม่ให้กับสคริปต์นี้ที่นั่น
วันนี้เราจะมาดูกันว่าคุณสามารถสร้างแถบเลื่อนโดยใช้ jQuery ด้วยมือของคุณเองได้อย่างไร
สไลเดอร์ (หรือที่บางคนเรียกว่า Rotator)คือบล็อกบนเว็บไซต์ที่ประกอบด้วยชุดรูปภาพพร้อมลิงก์ (และอาจเป็นข้อความ) ที่เปลี่ยนแปลงกันเป็นครั้งคราว
ดังนั้น. ขั้นแรก เราต้องสร้างบล็อกที่จะมีรูปภาพทั้งหมด (ขอเรียกว่าวิวพอร์ต หรือเรียกอีกอย่างว่า "พื้นที่การมองเห็นของแถบเลื่อน")
มาใส่รายการที่ไม่มีหมายเลข (ul) ลงไปเพื่อให้เราสามารถจัดเก็บสไลด์ทั้งหมดไว้ในที่เดียวได้อย่างสะดวก (โดยหลักการแล้ว คุณสามารถใช้คอนเทนเนอร์บล็อกใดก็ได้ที่รองรับองค์ประกอบภายใน)
สไลด์เองก็จะอยู่ในแถบเลื่อน jQuery
นี่คือสิ่งที่ HTML ควรมีลักษณะดังนี้:
- สไลด์ 1
- สไลด์ 2
- สไลด์ 3
มาเขียน CSS ทันทีเพื่อให้โค้ด HTML ทำงานได้อย่างถูกต้อง
ดังนั้น:
1) เราต้องทำให้วิวพอร์ตแสดงเฉพาะเนื้อหาที่ต้องการในปัจจุบัน และสไลด์ที่เหลือจะถูกซ่อนไว้
2) เพื่อให้คอนเทนเนอร์สไลด์ (ul ซึ่งอยู่ภายในวิวพอร์ต) สามารถเลื่อนไปทางซ้ายและขวาได้อย่างง่ายดาย
3) เพื่อให้สไลด์ (ซึ่งเราสร้างในรูปแบบขององค์ประกอบรายการ) ตั้งอยู่เรียงกันจากซ้ายไปขวา)
นี่คือ CSS ทุกอย่างเรียบง่ายด้วย: ล้น: ซ่อนไว้สำหรับ vieport, ตำแหน่ง: สัมบูรณ์สำหรับ ul และลอย: เหลือสำหรับ li
วิวพอร์ต ( ความกว้าง: 300px; ความสูง: 100px; ล้น: ซ่อน; ตำแหน่ง: ญาติ; ) .slidewrapper ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; บน: 0; ความสูง: 100px; ระยะขอบ: 0; การขยาย: 0; ) .slide( ความกว้าง: 300px; float: ซ้าย; ระยะขอบ: 0; พื้นหลัง: #ff0000;
ตัวอย่างเช่น ขนาดวิวพอร์ตและสไลด์ที่เลือกคือ 300x100 พิกเซล (แต่ต้องตรงกับวิวพอร์ตและสไลด์) คลาสที่หนึ่ง สอง และสามใช้เพื่อกำหนดสีของสไลด์เพื่อความชัดเจนเท่านั้น การใช้งานของคุณอาจไม่มีคลาสเหล่านี้
จส. ตัวเลื่อนใน jQueryตอนนี้เรามาดูโค้ด jQuery กันดีกว่า ซึ่งในตัวมันเองก็ไม่ได้มีอะไรซับซ้อนเกินไป
เราจำเป็นต้องตรวจสอบให้แน่ใจว่าสไลด์ถูกเลื่อนด้วยช่วงระยะเวลาหนึ่ง (javascript setInterval) และเมื่อวางเมาส์เหนือสไลด์ การเคลื่อนไหวจะหยุดชั่วคราว (เพื่อให้บุคคลสามารถอ่านเนื้อหาของสไลด์ได้)
ดังนั้นเราจึงได้โค้ด jQuery นี้:
เท่ากับความกว้างของสไลด์=300; var sliderTimer; $(function())( $(".slidewrapper").width($(".slidewrapper").children().size()*slideWidth); sliderTimer=setInterval(nextSlide,1000); $(".viewport) " ).hover(function())( clearInterval(sliderTimer); ),function())( sliderTimer=setInterval(nextSlide,1000); )); ฟังก์ชั่น nextSlide())( var currentSlide=parseInt($(".slidewrapper").data("current")); currentSlide++; if(currentSlide>=$(".slidewrapper").children().size()) ( currentSlide=0; ) $(".slidewrapper").animate((left: -currentSlide*slideWidth),300).data("current",currentSlide);
ตามลำดับ:
1) ประกาศตัวแปร = ความยาวสไลด์
2) ประกาศตัวแปรตัวจัดการตัวจับเวลา (ซึ่งจะนับระยะเวลาในการเปลี่ยนสไลด์)
3) เมื่อโหลดหน้า เราจะเริ่มจับเวลาและผูกการกระทำเพื่อวางเมาส์ไว้เหนือสไลด์ (เพื่อหยุดการเคลื่อนไหวของสไลด์ใต้เมาส์ชั่วคราว)
4) กำหนดความยาวของคอนเทนเนอร์ ul = ความยาวของสไลด์ * ด้วยจำนวนสไลด์ (เพื่อไม่ให้สไลด์ล้นถึงบรรทัดที่ 2)
5) เขียนฟังก์ชั่นที่เปลี่ยนสไลด์ (ตรวจสอบว่าตอนนี้เราอยู่ที่ไหน - สไลด์ไหนโดยใช้แอตทริบิวต์ data-current ul-container เพิ่มตำแหน่งปัจจุบัน ตรวจสอบว่าไม่ได้ไปเกินเฟรมของสไลด์ทั้งหมด เลื่อนแถบเลื่อน- ไปทางซ้ายตามจำนวนพิกเซลที่ต้องการ)
เราได้พัฒนาเวอร์ชันที่ใช้งานได้ของแถบเลื่อน jQuery ซึ่งใช้งานได้และสามารถใช้งานได้ง่ายเมื่อทำงานบนเว็บไซต์
สุดท้ายนี้ โค้ดจะถูกโพสต์บน jsfiddle.net ซึ่งคุณสามารถคลิกและเล่นได้
http://jsfiddle.net/FUxWc/
หากคุณมีคำถามใด ๆ ความคิดเห็นเปิดเราจะตอบช่วยเหลือและให้คำแนะนำ
ผมขอเริ่มด้วยการบอกว่าบทความนี้เขียนขึ้นเพื่อพูดคุยเกี่ยวกับวิธีสร้างแถบเลื่อนรูปภาพสำหรับหน้าเว็บ บทความนี้ไม่ได้มีลักษณะเป็นการศึกษาแต่อย่างใด แต่เป็นเพียงตัวอย่างว่าจะนำวัตถุประสงค์การพิจารณาของเราไปปฏิบัติได้อย่างไร คุณสามารถใช้โค้ดที่ให้ไว้ในบทความนี้เป็นเทมเพลตสำหรับการพัฒนาที่คล้ายกัน ฉันหวังว่าฉันจะสามารถถ่ายทอดแก่ผู้อ่านถึงสาระสำคัญของสิ่งที่ฉันเขียนในรายละเอียดที่เพียงพอและด้วยวิธีที่เข้าถึงได้
และถึงตอนนี้เมื่อไม่นานมานี้ฉันต้องติดตั้งแถบเลื่อนในไซต์เดียว แต่หลังจากค้นหาสคริปต์สำเร็จรูปทางอินเทอร์เน็ตแล้วฉันก็ไม่พบสิ่งใดที่มีประโยชน์เพราะ บางอย่างไม่ทำงานตามที่ฉันต้องการ ในขณะที่บางอันไม่ได้เริ่มทำงานเลยโดยไม่มีข้อผิดพลาดในคอนโซล สำหรับฉันดูเหมือนไม่น่าสนใจเกินไปที่จะใช้ปลั๊กอิน jQuery สำหรับแถบเลื่อนเพราะ... แม้ว่าวิธีนี้จะช่วยแก้ปัญหาได้ แต่ฉันจะไม่เข้าใจว่ากลไกนี้ทำงานอย่างไร และการใช้ปลั๊กอินสำหรับแถบเลื่อนเพียงตัวเดียวนั้นไม่เหมาะสมที่สุด ฉันยังไม่รู้สึกอยากเข้าใจสคริปต์ที่คดเคี้ยวด้วย ดังนั้นฉันจึงตัดสินใจเขียนสคริปต์ของตัวเองสำหรับแถบเลื่อน ซึ่งฉันจะทำเครื่องหมายเองตามต้องการ
ขั้นแรก เราต้องตัดสินใจเกี่ยวกับตรรกะของตัวเลื่อน จากนั้นจึงดำเนินการดำเนินการ ในขั้นตอนนี้ ความเข้าใจที่ชัดเจนเกี่ยวกับการทำงานของกลไกนี้มีความสำคัญมาก เพราะหากไม่มีกลไกนี้ เราก็ไม่สามารถเขียนโค้ดที่ทำงานในแบบที่เราเป็นได้อย่างแน่นอน ต้องการ.
วัตถุหลักของเราคือวิวพอร์ตนั่นคือบล็อกที่เราจะเห็นว่ารูปภาพของเราหมุนอย่างไร ในนั้นเราจะมีตัวตัดภาพสไลด์ นี่จะเป็นบล็อกของเราที่มีรูปภาพทั้งหมดเรียงกันเป็นบรรทัดเดียวและจะมีการเปลี่ยนแปลง ตำแหน่งภายในวิวพอร์ตนั่นเอง 
ถัดไป ที่ด้านข้างภายในวิวพอร์ต ในแนวตั้งตรงกลาง จะมีปุ่มย้อนกลับและไปข้างหน้า เมื่อคลิกแล้ว เราจะเปลี่ยนตำแหน่งของชุดสไลด์ที่สัมพันธ์กับวิวพอร์ตด้วย จึงทำให้เกิดเอฟเฟกต์ของการเลื่อนดูรูปภาพ และสุดท้าย วัตถุสุดท้ายจะเป็นปุ่มนำทางของเรา ซึ่งอยู่ที่ด้านล่างของวิวพอร์ต 
เมื่อเราคลิกที่มัน เราจะดูที่หมายเลขซีเรียลของปุ่มนี้แล้วย้ายไปยังสไลด์ที่เราต้องการ อีกครั้งโดยเลื่อน Slidewrapper (การเปลี่ยนแปลงจะทำโดยการเปลี่ยนคุณสมบัติการ แปลง CSS ซึ่งค่าจะเป็น คำนวณอย่างต่อเนื่อง)
ฉันคิดว่าตรรกะของการทำงานทั้งหมดนี้ควรจะชัดเจนหลังจากสิ่งที่ฉันได้กล่าวไว้ข้างต้น แต่หากความเข้าใจผิดยังคงเกิดขึ้นที่ไหนสักแห่ง ทุกอย่างจะชัดเจนยิ่งขึ้นในโค้ดด้านล่าง คุณเพียงแค่ต้องมีความอดทนเล็กน้อย
ตอนนี้มาเขียนกันเถอะ! ก่อนอื่น เรามาเปิดไฟล์ดัชนีของเราและเขียนมาร์กอัปที่เราต้องการที่นั่น:
อย่างที่คุณเห็น ไม่มีอะไรซับซ้อน block-for-slider ทำหน้าที่เป็นเพียงบล็อกที่จะวางตัวเลื่อนของเรา ภายในนั้นคือวิวพอร์ตเอง ซึ่งในนั้นคือตัวห่อหุ้มสไลด์ของเรา และยังเป็นรายการที่ซ้อนกันอยู่ ตรงนี้คือ สไลด์ และ img คือรูปภาพที่อยู่ในนั้น โปรดใส่ใจกับความจริงที่ว่ารูปภาพทั้งหมดจะต้องมีขนาดเท่ากันหรืออย่างน้อยเป็นสัดส่วน มิฉะนั้นแถบเลื่อนจะดูเบี้ยวเพราะ ขนาดของมันขึ้นอยู่กับสัดส่วนของภาพโดยตรง
ตอนนี้เราจำเป็นต้องจัดสไตล์ให้กับสิ่งทั้งหมดนี้ โดยปกติแล้วสไตล์จะไม่ได้รับการวิจารณ์เป็นพิเศษ แต่ฉันตัดสินใจที่จะยังคงดึงความสนใจไปที่สิ่งนี้ เพื่อจะได้ไม่มีความเข้าใจผิดในอนาคต
body ( ระยะขอบ: 0; การขยาย: 0; ) #block-for-slider ( ความกว้าง: 800px; ระยะขอบ: 0 อัตโนมัติ; ระยะขอบด้านบน: 100px; ) #viewport ( ความกว้าง: 100%; จอแสดงผล: ตาราง; ตำแหน่ง: สัมพันธ์; ล้น: ซ่อนเร้น; -webkit-user-select: ไม่มี; -ms-user-select: ไม่มี; -o-user-select: ไม่มี; : 1s; -transition-timing-function: easy-in-out; -o-transition-timing-function: ความสะดวกในการเปลี่ยน; ( ระยะขอบ : 0; padding: 0; ) #slidewrapper li ( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )
เริ่มต้นด้วย block-for-slider นี่คือบล็อกของเราในหน้าซึ่งเราจะจัดสรรให้กับตัวเลื่อนความสูงของมันจะขึ้นอยู่กับความกว้างและสัดส่วนของภาพของเราเพราะ วิวพอร์ตใช้ความกว้างทั้งหมดของ block-for-slider จากนั้นตัวสไลด์เองก็มีความกว้างเท่ากันและดังนั้นรูปภาพภายในจะเปลี่ยนความสูงขึ้นอยู่กับความกว้าง (สัดส่วนจะถูกรักษาไว้) ฉันวางองค์ประกอบนี้บนหน้าของฉันในแนวนอนตรงกลาง โดยเยื้องจากด้านบน 100px ทำให้ตำแหน่งสะดวกยิ่งขึ้นสำหรับตัวอย่าง
องค์ประกอบวิวพอร์ต ดังที่กล่าวไปแล้ว ครอบคลุมความกว้างทั้งหมดของ block-for-slider ของเรา โดยมีคุณสมบัติ overflow:hidden ซึ่งจะช่วยให้เราซ่อนฟีดรูปภาพของเรา ซึ่งขยายเกินวิวพอร์ตได้ 
คุณสมบัติ CSS ถัดไปคือ user-select:none ซึ่งช่วยให้คุณกำจัดการเน้นสีน้ำเงินขององค์ประกอบแถบเลื่อนแต่ละรายการเมื่อคุณคลิกที่ปุ่มหลายครั้ง
ไปที่ Slidewrapper ทำไมตำแหน่ง:สัมพันธ์และไม่สัมบูรณ์? ทุกอย่างง่ายมากเพราะ... หากเราเลือกตัวเลือกที่สองด้วยคุณสมบัติ viewport overflow:hidden จะไม่มีอะไรปรากฏต่อเราอย่างแน่นอนเพราะ วิวพอร์ตเองจะไม่ปรับตามความสูงของ Slidewrapper ซึ่งเป็นเหตุผลว่าทำไมมันถึงมี height:0 เหตุใดความกว้างจึงมีความสำคัญ และเหตุใดเราจึงตั้งค่าไว้เลย ประเด็นก็คือ สไลด์ของเราจะมีความกว้างเท่ากับ 100% ของวิวพอร์ต และเพื่อที่จะจัดเรียงสไลด์เหล่านี้ เราจำเป็นต้องมีที่ที่สไลด์จะตั้งได้ ดังนั้นความกว้างของ wrapper สไลด์ควรเท่ากับ 100% ของความกว้างวิวพอร์ต คูณด้วยจำนวนสไลด์ (ในกรณีของฉัน 4) สำหรับ transition และ transition-timing-function ในที่นี้ 1s หมายความว่าการเปลี่ยนแปลงตำแหน่งของ Slidewrapper จะเกิดขึ้นภายใน 1 วินาที และเราจะสังเกตมัน และการ Ease-in-out เป็นแอนิเมชั่นประเภทหนึ่งที่มันจะดำเนินไปอย่างช้าๆ ในครั้งแรก และ เร่งความเร็วจนถึงตรงกลางแล้วช้าลงอีกครั้ง ที่นี่คุณสามารถตั้งค่าตามดุลยพินิจของคุณ
บล็อกคุณสมบัติถัดไปจะตั้งค่า Slidewrapper และลูกๆ ของมันให้มีช่องว่างภายในเป็นศูนย์ ไม่จำเป็นต้องแสดงความคิดเห็นที่นี่
ต่อไป เราจัดสไตล์สไลด์ของเรา ความกว้างควรเท่ากับความกว้างของวิวพอร์ต แต่เนื่องจาก... พวกเขาอยู่ใน Slidewrapper ที่มีความกว้างเท่ากับความกว้างของวิวพอร์ตคูณด้วยจำนวนสไลด์ จากนั้นเพื่อให้ได้ความกว้างของวิวพอร์ตอีกครั้ง เราต้องหาร 100% ของความกว้างของ Slidewrapper ด้วยจำนวนสไลด์ (ในกรณีของฉัน อีกครั้ง โดย 4) จากนั้นเราจะเปลี่ยนให้เป็นองค์ประกอบอินไลน์โดยใช้ display:inline และตั้งค่าโฟลตไปทางซ้ายโดยเพิ่มคุณสมบัติ float:left เกี่ยวกับ list-style:none ฉันสามารถพูดได้ว่าฉันใช้มันเพื่อลบเครื่องหมายเริ่มต้นออกจาก li ในกรณีส่วนใหญ่เป็นมาตรฐานชนิดหนึ่ง
ด้วย Slide-img ทุกอย่างง่ายดาย รูปภาพจะใช้ความกว้างทั้งหมดของสไลด์ สไลด์จะปรับตามความสูง Slidewrapper จะปรับตามความสูงของสไลด์ และความสูงของวิวพอร์ตจะเปลี่ยนไปตามค่าของความสูงของ slidewrapper ดังนั้นความสูงของตัวเลื่อนของเราจะขึ้นอยู่กับสัดส่วนของภาพและขนาดของบล็อก ที่กำหนดไว้สำหรับตัวเลื่อน ซึ่งฉันได้เขียนไว้ข้างต้นแล้ว
ฉันคิดว่า ณ จุดนี้ เราเข้าใจสไตล์ต่างๆ ได้แล้ว เรามาสร้างสไลด์โชว์ง่ายๆ โดยไม่ต้องใช้ปุ่มกันดีกว่า และหลังจากที่เราแน่ใจว่ามันทำงานได้อย่างถูกต้อง เราก็จะเพิ่มและจัดสไตล์พวกมัน
เรามาเปิดไฟล์ js ของเราซึ่งจะมีโค้ดตัวเลื่อนอยู่ อย่าลืมเชื่อมต่อ jQuery เพราะ เราจะเขียนโดยใช้กรอบนี้ อย่างไรก็ตาม ในขณะที่เขียนบทความนี้ ฉันใช้ jQuery เวอร์ชัน 3.1.0 ไฟล์ที่มีสคริปต์จะต้องรวมไว้ที่ส่วนท้ายสุดของแท็ก body เนื่องจาก เราจะทำงานกับองค์ประกอบ DOM ที่ต้องเริ่มต้นก่อน
สำหรับตอนนี้ เราจำเป็นต้องประกาศตัวแปรสองสามตัว ตัวหนึ่งจะเก็บจำนวนสไลด์ที่เราเห็น ณ จุดหนึ่งของเวลาในวิวพอร์ต ฉันเรียกมันว่า SlideNow และตัวที่สองจะเก็บจำนวนสไลด์เดียวกันนี้ นี่คือ slideCount
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
ตัวแปร slideNow ต้องตั้งค่าเป็นค่าเริ่มต้น 1 เพราะ เมื่อโหลดหน้าเว็บ เราจะเห็นสไลด์แรกในวิวพอร์ตตามมาร์กอัปของเรา
ใน slideCount เราจะวางจำนวนองค์ประกอบลูกของ slidewrapper ทุกอย่างมีเหตุผลที่นี่
ถัดไป คุณต้องสร้างฟังก์ชันที่จะรับผิดชอบในการสลับสไลด์จากขวาไปซ้าย มาประกาศกัน:
ฟังก์ชั่น nextSlide() ( )
เราจะเรียกมันว่าบล็อกหลักของโค้ดของเรา ซึ่งเราจะพูดถึงในภายหลัง แต่สำหรับตอนนี้ เราจะบอกฟังก์ชันของเราว่าต้องทำอะไร:
ฟังก์ชัน nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ($("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( TranslateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit- แปลง": "แปล (" + TranslateWidth + "px, 0)", "-ms-transform": "แปล (" + TranslateWidth + "px, 0)", )); slideNow++; ) )
ขั้นแรก เราตรวจสอบว่าขณะนี้เราอยู่ในสไลด์สุดท้ายของฟีดของเราหรือไม่ ในการดำเนินการนี้ เราจะนำจำนวนสไลด์ทั้งหมดของเราโดยใช้ $("#slidewrapper").children().length และตรวจสอบด้วยจำนวนสไลด์ของเรา หากเท่ากัน แสดงว่าเราต้องเริ่มแสดง ฟีดอีกครั้งจาก 1 สไลด์ ซึ่งหมายความว่าเราเปลี่ยนคุณสมบัติการแปลง CSS ของ Slidewrapper เป็น Translate(0, 0) ดังนั้นเลื่อนไปที่ตำแหน่งเดิมเพื่อให้สไลด์แรกอยู่ในขอบเขตการมองเห็นของเรา อย่าลืมด้วย เกี่ยวกับ –webkit และ –ms สำหรับการแสดงผลข้ามเบราว์เซอร์ที่เพียงพอ (ดูการอ้างอิงคุณสมบัติ . css) หลังจากนี้ อย่าลืมอัปเดตค่าของตัวแปร slideNow โดยบอกว่าสไลด์หมายเลข 1 อยู่ในมุมมอง: slideNow = 1;
เงื่อนไขเดียวกันรวมถึงการตรวจสอบว่าจำนวนสไลด์ที่เราเห็นนั้นอยู่ภายในจำนวนสไลด์ของเรา แต่หากไม่เป็นไปตามนั้นเราจะกลับมาที่สไลด์ที่ 1 อีกครั้ง
หากไม่ตรงตามเงื่อนไขแรก แสดงว่าขณะนี้เราไม่ได้อยู่บนสไลด์สุดท้ายหรือบางสไลด์ที่ไม่มีอยู่ ซึ่งหมายความว่าเราจำเป็นต้องสลับไปยังสไลด์ถัดไป เราจะทำเช่นนี้โดยเลื่อน Slidewrapper ไปทางซ้าย ด้วยค่าเท่ากับความกว้างของวิวพอร์ต การเปลี่ยนแปลงจะเกิดขึ้นอีกครั้งผ่านคุณสมบัติการแปลที่คุ้นเคย ซึ่งค่าจะเท่ากับ "translate(" + TranslateWidth + "px, 0)" โดยที่ TranslateWidth คือระยะทางที่เรา Slidewrapper ถูกเลื่อนออกไป อย่างไรก็ตาม เรามาประกาศตัวแปรนี้ที่จุดเริ่มต้นของโค้ดของเรา:
var แปลความกว้าง = 0;
หลังจากย้ายไปยังสไลด์ถัดไป ให้เราบอกสไลด์ของเราตอนนี้ว่าเราเห็นสไลด์ถัดไป: slideNow++;
ณ จุดนี้ ผู้อ่านบางคนอาจสงสัยว่า: ทำไมเราไม่แทนที่ $("#viewport").width() ด้วยตัวแปรบางตัว เช่น slideWidth เพื่อให้มีความกว้างของสไลด์อยู่เสมอ คำตอบนั้นง่ายมากหากไซต์ของเราปรับเปลี่ยนได้ดังนั้นบล็อกที่จัดสรรสำหรับตัวเลื่อนก็ปรับเปลี่ยนได้เช่นกันโดยอาศัยสิ่งนี้เราสามารถเข้าใจได้ว่าเมื่อปรับขนาดความกว้างของหน้าต่างโดยไม่ต้องโหลดหน้าซ้ำ (เช่นเปิดโทรศัพท์ ด้านข้าง) ความกว้างของวิวพอร์ตจะเปลี่ยน และความกว้างของสไลด์หนึ่งจะเปลี่ยนตามไปด้วย ในกรณีนี้ Slidewrapper ของเราจะถูกเลื่อนไปที่ค่าความกว้างเดิม ซึ่งหมายความว่ารูปภาพจะแสดงเป็นบางส่วนหรือไม่แสดงเลยในวิวพอร์ต ด้วยการเขียน $("#viewport").width() แทน slideWidth ลงในฟังก์ชันของเรา เราจะบังคับให้คำนวณความกว้างของวิวพอร์ตทุกครั้งที่เราสลับสไลด์ ดังนั้นจึงมั่นใจได้ว่าเมื่อความกว้างของหน้าจอเปลี่ยนแปลงอย่างรวดเร็ว หน้าจอจะเลื่อนไปที่ สไลด์ที่เราต้องการ
อย่างไรก็ตาม เราได้เขียนฟังก์ชันไว้แล้ว ตอนนี้เราต้องเรียกมันหลังจากช่วงเวลาหนึ่งแล้ว เรายังสามารถเก็บช่วงเวลาไว้ในตัวแปรได้ด้วย ดังนั้นหากเราต้องการเปลี่ยนมัน เราก็สามารถเปลี่ยนค่าในโค้ดได้เพียงค่าเดียวเท่านั้น:
var สไลด์ช่วง = 2000;
เวลาใน js ระบุเป็นมิลลิวินาที
ตอนนี้เรามาเขียนโครงสร้างต่อไปนี้:
$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));
ทุกอย่างไม่ง่ายไปกว่านี้แล้ว ผ่านโครงสร้าง $(document).ready(function () ()) เราบอกว่าจะต้องดำเนินการต่อไปนี้หลังจากโหลดเอกสารจนเต็มแล้ว ต่อไป เราเพียงเรียกฟังก์ชัน nextSlide โดยมีช่วงเวลาเท่ากับ slideInterval โดยใช้ฟังก์ชัน setInterval ในตัว
หลังจากทำตามขั้นตอนทั้งหมดที่เราได้ดำเนินการข้างต้นแล้ว แถบเลื่อนของเราควรจะหมุนได้อย่างสมบูรณ์ แต่หากมีสิ่งผิดปกติเกิดขึ้น ปัญหาอาจเกิดจากเวอร์ชัน jQuery หรือการเชื่อมต่อไฟล์ใด ๆ ที่ไม่ถูกต้อง ไม่จำเป็นต้องตัดสินว่าคุณอาจทำให้เกิดข้อผิดพลาดที่ไหนสักแห่งในโค้ด ดังนั้นฉันขอแนะนำให้คุณตรวจสอบทุกอย่างอีกครั้งเท่านั้น 
ในระหว่างนี้ เรามาต่อกัน เพิ่มฟังก์ชันต่างๆ ลงในแถบเลื่อนของเรา เช่น หยุดการเลื่อนเมื่อเลื่อนเคอร์เซอร์ เพื่อทำเช่นนี้ เราจำเป็นต้องเขียนสิ่งต่อไปนี้ในบล็อกหลักของโค้ด (ภายใน $(document).ready( ฟังก์ชั่น () ()) โครงสร้าง:
$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));
เพื่อเริ่มวิเคราะห์โค้ดนี้ เราจำเป็นต้องรู้ว่า switchInterval คืออะไร ประการแรก นี่คือตัวแปรที่เก็บการเรียกเป็นระยะไปยังฟังก์ชัน nextSlide พูดง่ายๆ ก็คือ เรามีบรรทัดโค้ดนี้: setInterval(nextSlide, slideInterval); กลายเป็นสิ่งนี้: switchInterval = setInterval(nextSlide, slideInterval); - หลังจากการดัดแปลงเหล่านี้ บล็อกโค้ดหลักของเรามีรูปแบบดังต่อไปนี้:
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( ถัดไปสไลด์, ช่วงเวลาสไลด์);
ในที่นี้ฉันใช้เหตุการณ์โฮเวอร์ ซึ่งหมายถึง "เมื่อโฮเวอร์" เหตุการณ์นี้ทำให้ฉันสามารถติดตามช่วงเวลาที่ฉันวางเคอร์เซอร์ไว้เหนือวัตถุบางอย่าง ซึ่งในกรณีนี้คือวิวพอร์ต
หลังจากโฮเวอร์ ฉันจะล้างช่วงเวลาซึ่งฉันระบุในวงเล็บ (นี่คือ switchInterval ของเรา) จากนั้นคั่นด้วยเครื่องหมายจุลภาค ฉันเขียนสิ่งที่ฉันจะทำเมื่อฉันเลื่อนเคอร์เซอร์กลับ ในบล็อกนี้ ฉันจะกำหนด switchInterval ของเราอีกครั้งเป็นงวด เรียกฟังก์ชัน nextSlide
ตอนนี้ ถ้าเราทดสอบ เราจะเห็นว่าแถบเลื่อนของเราตอบสนองต่อการโฮเวอร์อย่างไร โดยหยุดไม่ให้เปลี่ยนสไลด์
ตอนนี้ได้เวลาเพิ่มปุ่มลงในแถบเลื่อนแล้ว เริ่มจากปุ่มไปข้างหน้าและย้อนกลับกันก่อน
ก่อนอื่น เรามาทำเครื่องหมายกันก่อน:
ตอนแรกมาร์กอัปนี้อาจเข้าใจยาก ฉันจะบอกทันทีว่าฉันรวมสองปุ่มนี้ไว้ใน div เดียวด้วยคลาส prev-next-btns เพื่อความสะดวกของคุณ คุณไม่จำเป็นต้องทำเช่นนี้ผลลัพธ์จะไม่ เปลี่ยน ตอนนี้เราจะเพิ่มสไตล์ให้กับพวกเขาแล้วทุกอย่างจะเรียบร้อย ชัดเจน:
#prev-btn, #next-btn ( ตำแหน่ง: สัมบูรณ์; ความกว้าง: 50px; ความสูง: 50px; สีพื้นหลัง: #fff; รัศมีเส้นขอบ: 50%; ด้านบน: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( เคอร์เซอร์: ตัวชี้; ) #prev-btn ( ซ้าย: 20px; ) #next-btn ( ขวา: 20px; )
ขั้นแรก เราวางตำแหน่งปุ่มของเราโดยใช้ตำแหน่ง:สัมบูรณ์ ดังนั้นจึงสามารถควบคุมตำแหน่งภายในวิวพอร์ตของเราได้อย่างอิสระ จากนั้นเราจะระบุขนาดของปุ่มเหล่านี้ และใช้รัศมีเส้นขอบเพื่อปัดเศษมุมเพื่อให้ปุ่มเหล่านี้กลายเป็นวงกลม สีของพวกมันจะเป็นสีขาวนั่นคือ #fff และการชดเชยจากขอบด้านบนของวิวพอร์ตจะเท่ากับครึ่งหนึ่งของความสูงของวิวพอร์ตนี้ลบด้วยความสูงของปุ่มครึ่งหนึ่ง (ในกรณีของฉัน 25px) ดังนั้นเราจึงทำได้ วางตำแหน่งไว้ในแนวตั้งตรงกลาง ต่อไป เราจะระบุว่าเมื่อเราวางเมาส์เหนือปุ่มเหล่านั้น เคอร์เซอร์จะเปลี่ยนเป็นตัวชี้ และสุดท้ายเราจะบอกปุ่มของเราทีละปุ่มว่าควรอยู่ห่างจากขอบ 20px เพื่อให้เรามองเห็นปุ่มเหล่านั้นในลักษณะที่เหมาะกับเรา .
ขอย้ำอีกครั้งว่า คุณสามารถจัดสไตล์องค์ประกอบของหน้าได้ตามที่คุณต้องการ ฉันแค่ยกตัวอย่างสไตล์ที่ฉันตัดสินใจใช้
หลังจากจัดสไตล์แล้ว แถบเลื่อนของเราควรมีลักษณะดังนี้: 
จากนั้น ไปที่ไฟล์ js ของเราอีกครั้ง ซึ่งเราจะอธิบายการทำงานของปุ่มของเรา เรามาเพิ่มอีกหนึ่งฟังก์ชัน มันจะแสดงสไลด์ก่อนหน้าให้เราดู:
ฟังก์ชั่น prevSlide() ( ถ้า (slideNow == 1 || slideNow SlideCount) ( TranslateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " แปลง": "แปล (" + TranslateWidth + "px, 0)", "-webkit-transform": "แปล (" + TranslateWidth + "px, 0)", "-ms-transform": "แปล (" + TranslateWidth + "px, 0)", )); slideNow = slideCount; ) อื่น ๆ ( TranslateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate( " + แปลความกว้าง + "px, 0)", )); slideNow--; ) )
เรียกว่า prevSlide และจะถูกเรียกเมื่อมีการคลิก prev-btn เท่านั้น อันดับแรก เราตรวจสอบว่าเราอยู่ในสไลด์ที่ 1 หรือไม่ ที่นี่เรายังตรวจสอบด้วยว่า SlideNow ของเราไปเกินช่วงจริงของสไลด์ของเราหรือไม่ และหากเงื่อนไขใดๆ เป็นจริง เราจะย้ายไปยังสไลด์สุดท้าย โดยย้าย Slidewrapper ตามคุณค่าที่เราต้องการ เราจะคำนวณค่านี้โดยใช้สูตร: (ความกว้างของหนึ่งสไลด์) * (จำนวนสไลด์ - 1) เรานำทั้งหมดนี้มาด้วยเครื่องหมายลบเพราะ เราเลื่อนไปทางซ้ายปรากฎว่าวิวพอร์ตจะแสดงสไลด์สุดท้ายให้เราดู ในตอนท้ายของบล็อกนี้ เรายังต้องบอกตัวแปร slideNow ว่าสไลด์สุดท้ายอยู่ในมุมมองของเราแล้ว
หากเราไม่ได้อยู่ในสไลด์แรก เราต้องย้อนกลับไป 1 เพื่อเปลี่ยนคุณสมบัติการแปลงของ Slidewrapper อีกครั้ง สูตรคือ: (ความกว้างของหนึ่งสไลด์) * (จำนวนสไลด์ปัจจุบัน - 2) อีกครั้งเราใช้เครื่องหมายลบ แต่ทำไม -2 ไม่ใช่ -1 เราจึงต้องเลื่อนกลับไปเพียง 1 สไลด์เท่านั้น ความจริงก็คือ ถ้าเราอยู่ในสไลด์ที่ 2 ตัวแปร x ของคุณสมบัติการแปลง:แปล(x,0) ของ Slidewrapper ของเราก็จะเท่ากับความกว้างของหนึ่งสไลด์อยู่แล้ว ถ้าเราบอกว่าเราต้องการ หากต้องการลบ 1 ออกจากจำนวนสไลด์ปัจจุบัน จากนั้นเราจะได้อีกครั้งโดยที่ตัวห่อสไลด์ถูกเลื่อนไปแล้ว ดังนั้นเราจะต้องเลื่อนความกว้างวิวพอร์ตเดียวกันเหล่านี้เป็น 0 ซึ่งหมายถึงใน slideNow - 2
ตอนนี้เราเพียงแค่ต้องเพิ่มบรรทัดเหล่านี้ลงในบล็อกหลักของโค้ด:
$("#next-btn").click(function() ( nextSlide(); ));
$("#prev-btn").คลิก(ฟังก์ชั่น() ( prevSlide(); ));
ที่นี่เราเพียงติดตามว่ามีการคลิกปุ่มของเราหรือไม่ และในกรณีนี้เราเรียกฟังก์ชันที่เราต้องการ ทุกอย่างเรียบง่ายและสมเหตุสมผล
ตอนนี้มาเพิ่มปุ่มนำทางสไลด์แล้วกลับไปที่มาร์กอัปอีกครั้ง:
อย่างที่คุณเห็น รายการที่ซ้อนกันได้ปรากฏขึ้นภายในวิวพอร์ต มาระบุตัวระบุ nav-btns ข้างในนั้นคือปุ่มนำทางของเรา เราจะกำหนดคลาสให้กับพวกเขา slide-nav-btn อย่างไรก็ตาม เราสามารถจบด้วย มาร์กอัป มาดูสไตล์กันดีกว่า:
เราให้บล็อก nav-btns ซึ่งมีปุ่มของเราอยู่ คุณสมบัติ position:absolute เพื่อไม่ให้ขยายความสูงของวิวพอร์ต เนื่องจาก Slidewrapper มีตำแหน่ง:relative property เราตั้งค่าความกว้างเป็น 100% เพื่อจัดกึ่งกลางปุ่มในแนวนอนโดยสัมพันธ์กับวิวพอร์ตโดยใช้ text-align:center จากนั้นใช้คุณสมบัติด้านล่างเพื่อให้บล็อกของเราทราบว่าควรอยู่ห่างจาก 20px จากขอบด้านล่าง
ด้วยปุ่มต่างๆ เราทำสิ่งเดียวกันกับสไลด์ แต่ตอนนี้เราให้ปุ่มเหล่านั้น display:inline-block เพราะ with display:inline พวกเขาไม่ตอบสนองต่อความกว้างและความสูงเพราะ อยู่ในตำแหน่งที่แน่นอน มาทำให้พวกมันเป็นสีขาวกันเถอะ และใช้รัศมีเส้นขอบที่คุ้นเคยอยู่แล้ว ทำให้มันมีรูปร่างเป็นวงกลม เมื่อเราวางเมาส์เหนือพวกมัน เราจะเปลี่ยนรูปลักษณ์ของเคอร์เซอร์สำหรับการแสดงผลตามปกติ
ตอนนี้เรามาดูส่วนของ jQuery กันดีกว่า:
ก่อนอื่น เรามาประกาศตัวแปร navBtnId ซึ่งจะเก็บดัชนีของปุ่มที่เราคลิก:
var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( TranslateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + TranslateWidth + "px, 0)", "-webkit-transform": "translate(" + แปลWidth + "px, 0)", "-ms-transform": "แปล (" + TranslateWidth + "px, 0)", )); slideNow = navBtnId + 1 ));
ที่นี่เมื่อเราคลิกที่ Slide-nav-btn เราจะเรียกใช้ฟังก์ชันที่ก่อนอื่นเลยกำหนดดัชนีของปุ่มที่ถูกคลิกให้กับตัวแปร navBtnId นั่นคือหมายเลขซีเรียลของมัน เนื่องจากการนับถอยหลังเริ่มต้นจากศูนย์ แล้วถ้าเรา คลิกที่ปุ่มที่สอง จากนั้นเขียนเป็นค่า navBtnId 1 ต่อไป เราจะตรวจสอบตำแหน่งที่เราเพิ่มหมายเลขหนึ่งลงในหมายเลขซีเรียลของปุ่มเพื่อให้ได้ตัวเลขเหมือนกับว่าการนับถอยหลังเริ่มต้นไม่ใช่จาก 0 แต่จาก 1 เรา เปรียบเทียบตัวเลขนี้กับจำนวนสไลด์ปัจจุบัน หากตรงกัน เราจะไม่ดำเนินการใดๆ เนื่องจากสไลด์ที่ต้องการอยู่ในวิวพอร์ตแล้ว
หากสไลด์ที่เราต้องการไม่อยู่ในมุมมองวิวพอร์ต เราจะคำนวณระยะทางที่เราต้องย้าย Slidewrapper ไปทางซ้าย จากนั้นเปลี่ยนค่าของคุณสมบัติการแปลง CSS ที่จะแปล (ระยะทางเท่ากันในหน่วยพิกเซล 0 ). เราได้ดำเนินการนี้มากกว่าหนึ่งครั้งแล้ว ดังนั้นจึงไม่ควรมีคำถามใดๆ ในตอนท้าย เราจะบันทึกค่าของสไลด์ปัจจุบันลงในตัวแปร slideNow อีกครั้ง โดยสามารถคำนวณค่านี้ได้โดยการเพิ่มค่าหนึ่งลงในดัชนีของปุ่มที่ถูกคลิก
ที่จริงแล้ว หากมีบางอย่างไม่ชัดเจน ฉันจะทิ้งลิงก์ไปยัง jsfiddle ซึ่งจะมีการจัดเตรียมโค้ดทั้งหมดที่เขียนไว้ในเนื้อหา
ขอบคุณสำหรับความสนใจของคุณ!
แท็ก:
- ตัวเลื่อน jquery
- ซีเอสเอส
- แอนิเมชั่น CSS3
- html
แต่เนื่องจากเรากำลังพูดถึงพื้นฐานของ JS เพื่อศึกษาพื้นฐาน ฉันจะอธิบายวิธีสร้างแถบเลื่อนอย่างง่ายโดยใช้เฉพาะภาษา JavaScript มาเริ่มวิเคราะห์เนื้อหากันดีกว่า!
มีแถบเลื่อนประเภทใดบ้างและจำเป็นต้องใช้ที่ไหน?จำเป็นต้องมีการสร้างแกลเลอรีที่สะดวกสำหรับการดูภาพในบริการเว็บทั้งหมดที่มีรูปถ่ายบางส่วนเป็นอย่างน้อย สิ่งเหล่านี้อาจเป็นร้านค้าออนไลน์ เว็บไซต์ผลงาน ข่าวสารและบริการด้านการศึกษา เว็บไซต์ของบริษัทและสถานประกอบการบันเทิงพร้อมรายงานภาพถ่าย ฯลฯ
อย่างไรก็ตาม นี่เป็นการใช้แถบเลื่อนมาตรฐาน เทคโนโลยีดังกล่าวยังใช้เพื่อดึงดูดลูกค้าให้มาสู่สินค้าส่งเสริมการขาย บริการ หรือเพื่ออธิบายข้อดีขององค์กร
ลูกค้าส่วนใหญ่ขอให้นำไปใช้กับแกลเลอรีประเภท "Carousel" นี่เป็นเครื่องมือที่สะดวกสำหรับการดูภาพขนาดใหญ่โดยผู้ใช้สามารถสลับสไลด์ไปข้างหน้าและข้างหลังได้ ในกรณีนี้ รูปภาพมักจะสลับโดยอัตโนมัติหลังจากช่วงระยะเวลาหนึ่ง กลไกนี้มีชื่อเล่นเนื่องจากการแสดงรูปภาพซ้ำเป็นวงกลม
วันนี้หากคุณต้องการคุณสามารถค้นหาปลั๊กอินที่แปลกและน่าดึงดูดที่สุดบนอินเทอร์เน็ตเพื่อดูชุดภาพถ่าย
กิจกรรมอิสระทีนี้มาเริ่มสร้างตัวเลื่อนของเราเองกันดีกว่า ในขั้นตอนของการเรียนรู้นี้ หากต้องการนำไปใช้ ฉันขอแนะนำให้คุณใช้ pure การดำเนินการนี้จะเปลี่ยนรูปภาพเป็นวงกลมโดยอัตโนมัติ
ด้านล่างนี้ฉันได้แนบรหัสสำหรับการสมัครของฉันแล้ว ฉันแสดงความคิดเห็นให้คุณในขณะที่ฉันเขียนโค้ด
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
ตัวสลับรูปภาพอัตโนมัติ /*อธิบายลักษณะที่ปรากฏของเฟรม พื้นฐานสำหรับแถบเลื่อนในอนาคต */ #slides( ตำแหน่ง: สัมพันธ์; ความสูง: 415px; ความกว้าง: 100%; การขยาย: 0px; รายการสไตล์ประเภท: ไม่มี; กล่อง- เงา: 0 0 7px #010, 0 0 10px สีน้ำเงิน, 0 0 15px #010, 0 0 35px #010; ) /* แก้ไขการแสดงภาพ*/ img ( ความกว้าง: อัตโนมัติ; ความสูง: 390px; การขยาย: 13px; ) /* ระบุว่ารายการเนื้อหาจะแสดงที่กึ่งกลางขององค์ประกอบหลัก เช่น ในกรณีนี้ที่กึ่งกลางขององค์ประกอบ ul - พื้นฐานสำหรับสไลด์ */ li ( text-align: center; ) /* ฉันอธิบายลักษณะที่ปรากฏของสไลด์เอง */ .slide( ตำแหน่ง: แน่นอน; ความทึบ: 0 ; ด้านบน: 0px; ความสูง: 100%; ความกว้าง: 100%; -moz-transition: ความทึบแสง 1.5s; -webkit-transition: ความทึบแสง 1.5s; : 1; ดัชนี z: 4;
ฉันหวังว่าคุณจะไม่มีปัญหากับโค้ด css และ html แต่ฉันเห็นว่าจำเป็นต้องแยกส่วนการทำงานของสคริปต์ออก เรามาถอดรหัสสิ่งที่เขียนกันดีกว่า
ดังนั้น ขั้นแรก โดยใช้เมธอด querySelectorAll ฉันจะกำหนดรายการองค์ประกอบทั้งหมดภายในช่วงที่ระบุให้ตัวแปร MySlider บ่งบอกถึงรายการนี้
document.querySelectorAll("#สไลด์ .slide")
ดังนั้น MySlider จึงจัดเก็บคอลเลกชันขององค์ประกอบสี่รายการ
ต่อไป ฉันระบุรูปภาพที่จะเริ่มแสดงโดยการตั้งค่าตัวแปร currentPicture ให้เป็นศูนย์ จากนั้นฉันระบุว่าการเปลี่ยนสไลด์เกิดขึ้นใน 2.7 วินาทีและจะต้องเรียกใช้ฟังก์ชันการประมวลผล nextSlide
มาดูฟังก์ชั่นกันดีกว่า
ในตอนแรก สำหรับองค์ประกอบรายการปัจจุบัน ฉันเปลี่ยนคำอธิบายของคลาส เช่น ฉันเขียน "การแสดงสไลด์" ใหม่เป็น "สไลด์" ส่งผลให้มองไม่เห็นภาพ
ตอนนี้ฉันกำหนดองค์ประกอบคอลเลกชันใหม่ที่จะแสดงบนหน้าจอ เมื่อต้องการทำสิ่งนี้ ฉันเข้ารับตำแหน่งปัจจุบัน +1 คุณอาจสังเกตเห็นว่าฉันใช้การหารด้วยเศษ (%) ด้วยจำนวนสไลด์ที่มี เคล็ดลับนี้ต้องใช้หูเพื่อเริ่มการแสดงในแวดวงใหม่ นี่คือลักษณะที่แท้จริง:
แต่ตอนนี้ฉันกำหนดคำอธิบายชั้นเรียน "การแสดงสไลด์" ให้กับองค์ประกอบผลลัพธ์ อย่างที่คุณเห็นทุกอย่างถูกนำไปใช้อย่างง่ายดายที่สุด
ขอบคุณสำหรับความสนใจของคุณ อย่าลืมเข้าร่วมกลุ่มสมาชิกของฉัน อ่านบทความใหม่ และแน่นอน แบ่งปันลิงก์ไปยังสิ่งพิมพ์ที่คุณชื่นชอบกับเพื่อน ๆ ของคุณ ฉันขอให้คุณโชคดีในการเรียนรู้ JavaScript ลาก่อน!
ขอแสดงความนับถือ Roman Chueshov
อ่าน: 256 ครั้ง