การสร้างแถบเลื่อนเนื้อหาที่สวยงาม แถบเลื่อนรูปภาพที่กำหนดเองโดยใช้ jQuery
ผมขอเริ่มด้วยการบอกว่าบทความนี้เขียนขึ้นเพื่อพูดคุยเกี่ยวกับวิธีสร้างแถบเลื่อนรูปภาพสำหรับหน้าเว็บ บทความนี้ไม่ได้มีลักษณะเป็นการศึกษาแต่อย่างใด แต่เป็นเพียงตัวอย่างว่าสามารถนำวัตถุประสงค์การพิจารณาของเราไปปฏิบัติได้อย่างไร คุณสามารถใช้โค้ดที่ให้ไว้ในบทความนี้เป็นเทมเพลตสำหรับการพัฒนาที่คล้ายกัน ฉันหวังว่าฉันจะสามารถถ่ายทอดแก่ผู้อ่านถึงสาระสำคัญของสิ่งที่ฉันเขียนในรายละเอียดที่เพียงพอและด้วยวิธีที่เข้าถึงได้
และถึงตอนนี้เมื่อไม่นานมานี้ฉันต้องติดตั้งแถบเลื่อนในไซต์เดียว แต่หลังจากค้นหาสคริปต์สำเร็จรูปทางอินเทอร์เน็ตแล้วฉันก็ไม่พบสิ่งใดที่มีประโยชน์เพราะ บางอย่างไม่ทำงานตามที่ฉันต้องการ ในขณะที่บางตัวไม่ได้เริ่มทำงานเลยโดยไม่มีข้อผิดพลาดในคอนโซล สำหรับฉันดูเหมือนว่ามันไม่น่าสนใจเกินไปที่จะใช้ปลั๊กอิน 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; การขยาย: 0; ) #slidewrapper li ( ความกว้าง: calc(100%/4); สไตล์รายการ: ไม่มี; จอแสดงผล: อินไลน์; ลอย: ซ้าย; ) .slide-img ( ความกว้าง: 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").click(function() ( prevSlide(); ));
ที่นี่เราเพียงติดตามว่ามีการคลิกปุ่มของเราหรือไม่ และในกรณีนี้เราเรียกฟังก์ชันที่เราต้องการ ทุกอย่างเรียบง่ายและสมเหตุสมผล
ตอนนี้มาเพิ่มปุ่มนำทางสไลด์แล้วกลับไปที่มาร์กอัปอีกครั้ง:
อย่างที่คุณเห็น รายการที่ซ้อนกันได้ปรากฏขึ้นภายในวิวพอร์ต มาระบุตัวระบุ nav-btns ข้างในนั้นคือปุ่มนำทางของเรา เราจะกำหนดคลาสให้กับพวกเขา slide-nav-btn อย่างไรก็ตาม เราสามารถจบด้วย มาร์กอัป มาดูสไตล์กันดีกว่า:
#nav-btns ( ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ด้านล่าง: 20px; การขยาย: 0; ระยะขอบ: 0; การจัดแนวข้อความ: กึ่งกลาง; ) .slide-nav-btn ( ตำแหน่ง: ญาติ; จอแสดงผล: อินไลน์บล็อก; รูปแบบรายการ: ไม่มี ความกว้าง: 20px; สีพื้นหลัง: #fff; ระยะขอบ: 3px;
เราให้บล็อก 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
บางครั้งฉันต้องแก้ไขปัญหาที่เกี่ยวข้องกับฟรอนต์เอนด์ แม้ว่าฉันจะไม่ชอบก็ตาม :)
ตามความเป็นจริง คุณสามารถประเมินทัศนคติของฉันต่อทุกสิ่งที่เกี่ยวข้องกับ "ความสวยงาม" ได้จากการออกแบบไซต์นี้ ซึ่งพัฒนาโดยฉันคนเดียว :)
อย่างไรก็ตาม เมื่อไม่นานมานี้ ฉันต้องเผชิญกับความจำเป็นในการใช้แถบเลื่อนใน 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%; ความสูง: 100%; พื้นหลัง: RGBA(51,51,51,0.8); ดัชนี z: 22; -
จากการใช้สไตล์ JS เหล่านี้ ภาพหมุนจะมีลักษณะดังนี้:
ฉันย้ายทั้งมาร์กอัป 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 = "บล็อก"; อย่างอื่นถ้า (ดัชนี == 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< 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(); } } };
ความคิดเห็นเล็กน้อยเกี่ยวกับโค้ดข้างต้น เนื้อหาของไฟล์ popupSlider.js เป็นคลาส JavaScript Slider เดียว ซึ่งมี Constructor และเมธอดคลาส เช่นเดียวกับใน PHP เฉพาะใน JS เท่านั้นที่จำเป็นต้องมีคำจำกัดความของ Constructor ซึ่งต่างจาก PHP
ตัวสร้างถูกกำหนดโดยใช้โครงสร้างต่อไปนี้:
ฟังก์ชั่น Slider(องค์ประกอบ) ( // รหัสตัวสร้าง)
ภายใน Constructor จะต้องระบุการกระทำที่จะดำเนินการเมื่อสร้างคลาสอ็อบเจ็กต์
วิธีการเรียนจะอยู่ภายในต้นแบบและจะพร้อมใช้งานสำหรับทุกอินสแตนซ์ของคลาส JavaScript นี้ ต้นแบบ JS ในกรณีของฉันอธิบายโดยการออกแบบต่อไปนี้:
Slider.prototype = ( //วิธีการ )
พวกเขาจะถูกเรียกนอกเนื้อหาของชั้นเรียนดังนี้:
ตัวเลื่อน Var = ตัวเลื่อนใหม่ (); เลื่อน.class_method();
และภายในโค้ดของชั้นเรียนนั้นเอง มีวิธีการดังต่อไปนี้:
นี้.class_method();
สิ่งสำคัญคืออย่าลืมว่าใน JavaScript ค่านี้ขึ้นอยู่กับบริบทของการโทร ดังนั้นในเนื้อความของวิธีการบางอย่างซึ่งจำเป็นต้องเรียกวิธีการและคุณสมบัติของคลาสจึงมีโครงสร้างดังกล่าว:
ตัวเอง=สิ่งนี้; 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 ที่ตอบสนองซึ่งปรากฏเมื่อเร็ว ๆ นี้และเผยแพร่โดยไม่มีข้อจำกัดใด ๆ เช่น ฟรีอย่างแน่นอน
ว้าวสไลเดอร์แถบเลื่อนรูปภาพ jQuery ที่ตอบสนองพร้อมชุดเอฟเฟกต์ภาพที่ยอดเยี่ยม (การหมุน การลอยออก การเบลอ เกลียว มู่ลี่ ฯลฯ...) และเทมเพลตสำเร็จรูปมากมาย ด้วยวิซาร์ดการแทรกหน้าในตัวของ WOW Slider คุณสามารถสร้างสไลด์โชว์ที่น่าทึ่งได้อย่างง่ายดายและง่ายดายภายในไม่กี่นาที เว็บไซต์ของนักพัฒนาประกอบด้วยเอกสารที่จำเป็นทั้งหมดสำหรับการตั้งค่าและใช้งานปลั๊กอินในภาษารัสเซีย รวมถึงตัวอย่างการทำงานของปลั๊กอินแบบเรียลไทม์ที่ยอดเยี่ยม ปลั๊กอิน Wordpress แยกต่างหากและโมดูลสำหรับ Joomla ก็พร้อมให้ดาวน์โหลดเช่นกัน ฉันแน่ใจว่าหลายๆ คนจะชอบแถบเลื่อนที่ยอดเยี่ยมนี้ ทั้งผู้เริ่มต้นและผู้ดูแลเว็บที่มีประสบการณ์
ไฮสไลเดอร์HiSlider - HTML5, ตัวเลื่อน Jquery และแกลเลอรีรูปภาพ, ปลั๊กอินฟรีสำหรับการใช้งานส่วนตัวบนเว็บไซต์ที่ใช้ระบบยอดนิยม - WordPress, Joomla, Drupal ด้วยความช่วยเหลือของเครื่องมือที่เรียบง่ายแต่ใช้งานได้ดีนี้ คุณสามารถสร้างสไลด์โชว์ที่น่าทึ่งและมีชีวิตชีวา การนำเสนอที่น่าทึ่ง และการประกาศข้อความใหม่บนหน้าเว็บไซต์ของคุณได้อย่างง่ายดาย เทมเพลตและสกินสำเร็จรูปหลายแบบสำหรับแถบเลื่อน เอฟเฟกต์การเปลี่ยน (เปลี่ยน) เนื้อหาที่น่าทึ่ง เอาต์พุตของเนื้อหามัลติมีเดียต่างๆ: วิดีโอจาก YouTube และ Vimeo การตั้งค่าผู้ใช้ที่ยืดหยุ่น ฯลฯ...
Nivo Slider เป็นโปรแกรมเก่าที่ดี ซึ่งทุกคนรู้จักดี ซึ่งเป็นหนึ่งในโปรแกรมเลื่อนรูปภาพที่สวยงามและใช้งานง่ายที่สุด ปลั๊กอิน JQuery Nivo Slider สามารถดาวน์โหลดและใช้งานได้ฟรี และได้รับอนุญาตภายใต้ใบอนุญาต MIT นอกจากนี้ยังมีปลั๊กอินแยกต่างหากสำหรับ WordPress แต่น่าเสียดายที่มันได้รับการชำระเงินแล้ว และคุณจะต้องจ่าย $29 สำหรับใบอนุญาตหนึ่งใบ เป็นการดีกว่าถ้าใช้ไฟล์ธีม WP และแนบปลั๊กอิน Nivo Slider เวอร์ชัน jQuery ฟรีลงในบล็อกของคุณ เนื่องจากมีข้อมูลมากมายเกี่ยวกับวิธีการทำเช่นนี้บนอินเทอร์เน็ต
ในส่วนของฟังก์ชันการทำงาน ทุกอย่างเรียบร้อยดี มันใช้ไลบรารี jQuery v1.7+, เอฟเฟกต์การเปลี่ยนแปลงที่สวยงาม, การตั้งค่าที่เรียบง่ายและยืดหยุ่นมาก, รูปแบบที่ปรับเปลี่ยนได้, การครอบตัดรูปภาพอัตโนมัติ และอื่นๆ อีกมากมาย
แนวคิดของแถบเลื่อนได้รับแรงบันดาลใจจากนักพัฒนาซึ่งเป็นที่รู้จักกันดีในรูปแบบการนำเสนอผลิตภัณฑ์ของ Apple ซึ่งวัตถุขนาดเล็ก (รูปภาพ) จำนวนมากเปลี่ยนแปลงได้โดยการคลิกที่หมวดหมู่ที่เลือกพร้อมเอฟเฟกต์ภาพเคลื่อนไหวแบบธรรมดา Codrops นำเสนอบทช่วยสอนโดยละเอียดเกี่ยวกับวิธีการสร้างแถบเลื่อนนี้ เค้าโครงที่สมบูรณ์ของมาร์กอัป Html ชุดกฎ CSS และปลั๊กอิน jQuery ที่ปฏิบัติการได้ รวมถึงตัวอย่างการใช้งานแถบเลื่อนแบบเรียลไทม์ที่ยอดเยี่ยม
แถบเลื่อนรูปภาพแบบเต็มหน้าจอโดยใช้ JQuery และ CSS3 + บทช่วยสอนโดยละเอียดเกี่ยวกับการรวมปลั๊กอินเข้ากับหน้าเว็บไซต์ แนวคิดก็คือการแบ่งสไลด์ปัจจุบันที่เปิดอยู่ด้วยเนื้อหาเฉพาะเมื่อย้ายไปยังเนื้อหาถัดไปหรือก่อนหน้า การใช้ภาพเคลื่อนไหว JQuery และ CSS คุณสามารถสร้างช่วงการเปลี่ยนภาพที่ไม่ซ้ำใครระหว่างสไลด์ได้ รูปแบบที่ตอบสนองของแถบเลื่อนทำให้มั่นใจได้ว่าจะดูดีเท่ากันบนอุปกรณ์ผู้ใช้ประเภทต่างๆ
แถบเลื่อนเนื้อหาที่ปรับความกว้างและความสูงโดยอัตโนมัติ ขึ้นอยู่กับขนาดของคอนเทนเนอร์หลักที่เนื้อหานั้นตั้งอยู่ ค่อนข้างใช้งานง่ายและมีความยืดหยุ่นในการตั้งค่า แถบเลื่อนจะทำงานบน JQuery โดยมีการนำทางที่ด้านล่าง เมื่อขนาดหน้าจอเปลี่ยนไป การนำทางจะแสดงในรูปแบบของไอคอน เอกสารที่มีรายละเอียดมาก (บทช่วยสอนการสร้าง) และตัวอย่างการใช้งานจริง
แถบเลื่อนเวอร์ชันทดลองที่แสดงรูปภาพที่มีการเปลี่ยนจากระนาบ 3 มิติ รูปภาพจะถูกแบ่งออกเป็นสองกลุ่มในแนวนอน โดยใช้ลูกศรนำทางเพื่อเปลี่ยนและเปลี่ยนแต่ละรูปภาพที่ตามมาเป็นสถานะการรับชม โดยทั่วไปไม่มีอะไรพิเศษ แต่แนวคิดและเทคนิคการดำเนินการนั้นค่อนข้างน่าสนใจ
แถบเลื่อนรูปภาพ jQuery แบบเต็มหน้าจอที่ใช้งานง่าย ตอบสนอง 100% การทำงานของแถบเลื่อนนั้นขึ้นอยู่กับการเปลี่ยน CSS (คุณสมบัติการเปลี่ยนแปลง) ร่วมกับความมหัศจรรย์ของ jQuery ค่าความกว้างสูงสุดถูกกำหนดไว้ที่ 100% โดยค่าเริ่มต้น ดังนั้นขนาดของรูปภาพจะเปลี่ยนไปขึ้นอยู่กับการเปลี่ยนแปลงขนาดหน้าจอ ไม่มีเอฟเฟกต์แอนิเมชั่นพิเศษหรือการออกแบบที่หรูหรา ทุกอย่างเรียบง่ายและออกแบบมาเพื่อการใช้งานที่ไร้ปัญหา
ชื่อนี้พูดได้ด้วยตัวมันเอง นี่อาจเป็นหนึ่งในแถบเลื่อนรูปภาพ jQuery ที่เบาและเรียบง่ายที่สุดที่ฉันเคยเจอ (ปลั๊กอิน 1kb) ResponsiveSlides.js เป็นปลั๊กอิน JQuery ขนาดเล็กที่สร้างสไลด์โชว์โดยใช้องค์ประกอบภายในคอนเทนเนอร์ ใช้งานได้กับเบราว์เซอร์ที่หลากหลาย รวมถึง IE ทุกรุ่น ซึ่งเป็นตัวหยุดความคืบหน้าอันโด่งดังตั้งแต่ IE6 ขึ้นไป งานใช้การเปลี่ยน CSS3 ร่วมกับจาวาสคริปต์เพื่อความน่าเชื่อถือ รูปแบบเรียบง่ายโดยใช้รายการแบบไม่เรียงลำดับ การปรับแต่งช่วงการเปลี่ยนภาพและช่วงเวลา การควบคุมการสลับสไลด์แบบอัตโนมัติและแบบแมนนวล ตลอดจนรองรับการแสดงสไลด์หลายรายการพร้อมกัน นี่คือ "ทารก" ที่ขี้เล่น
Camera เป็นปลั๊กอิน JQuery ฟรีสำหรับการจัดระเบียบสไลด์โชว์บนหน้าเว็บไซต์ ตัวเลื่อนน้ำหนักเบาพร้อมเอฟเฟกต์การเปลี่ยนแปลงมากมาย รูปแบบที่ตอบสนอง 100% และการตั้งค่าที่ง่ายมาก พอดีกับหน้าจอของอุปกรณ์ผู้ใช้ใดๆ (จอภาพพีซี แท็บเล็ต สมาร์ทโฟน และโทรศัพท์มือถือ) ความเป็นไปได้ที่จะสาธิตวิดีโอแบบฝัง การเปลี่ยนสไลด์อัตโนมัติและการควบคุมด้วยตนเองโดยใช้ปุ่มและบล็อกภาพขนาดย่อ แกลเลอรีรูปภาพที่เกือบจะสมบูรณ์ในรูปแบบกะทัดรัด
แถบเลื่อนตอบสนองที่ค่อนข้างง่ายอีกตัวใน jQuery คุณสามารถวางเนื้อหา วิดีโอ รูปภาพ ข้อความ และองค์ประกอบอื่นๆ บนสไลด์ของคุณได้ ขยายการสนับสนุนสำหรับหน้าจอสัมผัส การใช้ภาพเคลื่อนไหวการเปลี่ยนแปลง CSS สไลด์โชว์และแกลเลอรี่ภาพขนาดกะทัดรัดหลากหลายรูปแบบ การควบคุมอัตโนมัติและด้วยตนเอง สลับสไลด์โดยใช้ปุ่มและโดยการเลือกภาพขนาดย่อ ไฟล์ต้นฉบับมีขนาดเล็ก กำหนดค่าและนำไปใช้งานได้ง่ายมาก
FlexSlider 2 - เวอร์ชันอัปเดตของแถบเลื่อนที่มีชื่อเดียวกัน พร้อมการตอบสนองที่ดีขึ้น การลดขนาดสคริปต์ และลดการจัดเรียงใหม่/การวาดใหม่ให้เหลือน้อยที่สุด ปลั๊กอินประกอบด้วยแถบเลื่อนพื้นฐาน การควบคุมสไลด์พร้อมภาพขนาดย่อ ลูกศรซ้าย-ขวาในตัว และแถบนำทางด้านล่างในรูปแบบของปุ่ม ความสามารถในการแสดงวิดีโอในสไลด์ (vimeo), การตั้งค่าที่ยืดหยุ่น (การเปลี่ยนภาพ, การออกแบบ, ช่วงเวลา), รูปแบบที่ปรับเปลี่ยนได้อย่างเต็มที่
ปลั๊กอิน jQuery ตอบสนองที่รู้จักกันดีและค่อนข้างเป็นที่นิยมสำหรับการสร้างแกลเลอรี่ภาพและแถบเลื่อนคุณภาพสูง อินเทอร์เฟซตัวเลื่อนต้องขอบคุณแผงควบคุมที่มีลักษณะคล้ายกับเครื่องเล่นวิดีโอที่คุ้นเคย ปลั๊กอินมีธีมการออกแบบที่แตกต่างกันมากมาย รองรับวิดีโอและรูปภาพแบบฝังจากบริการยอดนิยม: Flickr, Vimeo, YouTube และอื่น ๆ เอกสารรายละเอียดเกี่ยวกับการตั้งค่าและการใช้งาน
ตัวเลื่อนรูปภาพ jQuery ที่เรียบง่ายและไม่ซับซ้อนซึ่งเขียนขึ้นโดยเฉพาะสำหรับการออกแบบเว็บแบบตอบสนอง Blueberry เป็นปลั๊กอิน jQuery แบบโอเพ่นซอร์สแบบทดลอง การออกแบบที่เรียบง่าย ไม่มีเอฟเฟกต์ มีเพียงภาพป๊อปอัปที่ราบรื่นแทนที่กันหลังจากช่วงระยะเวลาหนึ่งเท่านั้น ทุกอย่างง่ายมาก ติดตั้ง เชื่อมต่อและใช้งาน...
ตัวเลื่อนรูปภาพ jQuery ขนาดกะทัดรัดพร้อมองค์ประกอบ Lightbox ด้วยขนาดที่ยืดหยุ่น จึงเป็นเรื่องง่ายมากที่จะรวมเข้ากับคอนเทนเนอร์ใดๆ ลงในรายการเดียวในรูปแบบของภาพขนาดย่อ เมื่อเลื่อนเคอร์เซอร์ของเมาส์หรือคลิกที่ภาพเหล่านั้น Lightbox ที่มีรูปภาพขยายและส่วนควบคุมจะถูกเปิดใช้งาน สะดวกในการวางแถบเลื่อนดังกล่าวในแผงด้านข้างเพื่อนำเสนอผลิตภัณฑ์หรือประกาศข่าวสาร โซลูชั่นที่ยอดเยี่ยมสำหรับไซต์ที่มีข้อมูลจำนวนมาก
แถบเลื่อนตอบสนองฟรีพร้อมการเปลี่ยน CSS3 ขั้นสูง สไตล์มินิมอล ดีไซน์ 3 ธีม แต่ละเฟรมเลื่อนในแนวนอน ปรากฏตรงกลาง รูปภาพไปทางซ้าย ลายเซ็นอยู่ทางขวา ภาพย่อจะทำซ้ำที่มุมขวาล่าง แบ่งหน้าการชมสินค้าให้ดูในแต่ละเฟรม ส่วนควบคุมยังรวมถึงปุ่มย้อนกลับและไปข้างหน้า รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด
แถบเลื่อนรูปภาพที่ง่ายมากทั้งในแง่ของฟังก์ชันและการตั้งค่า ในบรรดาการตั้งค่ามีการเปลี่ยนแปลงความเร็วในการเปลี่ยนสไลด์การเปิดใช้งานโหมดแมนนวล (เปิดใช้งานปุ่มควบคุม) การแสดงสไลด์ต่อเนื่อง แถบเลื่อนนี้มีสิทธิ์ที่จะมีอยู่และดึงดูดฉันเพียงเพราะมันมีอยู่จริง ฉันไม่พบสิ่งที่น่าสนใจเป็นพิเศษในการพัฒนานี้ บางทีฉันอาจจะไม่ได้มองหามันให้ดี)))
สหายของ Vladimir Kudinov แถบเลื่อนภาพที่สวยงามและปรับได้ เครื่องมือที่แข็งแกร่งและออกแบบมาอย่างดี มาพร้อมกับตัวอย่างประกอบและคำแนะนำโดยละเอียดสำหรับการสร้าง การติดตั้ง และการใช้งาน การออกแบบที่ปรับเปลี่ยนได้ ปุ่มที่สวยงาม และลูกศรสีเขียว ทุกอย่างค่อนข้างดีและเงียบสงบโดยไม่มีแรงกดดัน
ปลั๊กอินตัวเลื่อน JQuery ฟรีพร้อมเอฟเฟกต์พารัลแลกซ์สำหรับรูปภาพและสไลด์ข้อความ ภาพเคลื่อนไหวสไลด์มีค่าการแสดงผลหลายค่าพร้อมการควบคุมเต็มรูปแบบในแต่ละการตั้งค่าเวลาและภาพเคลื่อนไหว ความสามารถในการทำให้องค์ประกอบต่างๆ บนสไลด์เคลื่อนไหวพร้อมกัน คุณสามารถตั้งค่าวิธีการสร้างภาพเคลื่อนไหว สไลด์เฟด หรือการเปลี่ยนจากทิศทางที่ต้องการได้ การแสดงผลอัตโนมัติและการควบคุมด้วยตนเองโดยใช้ลูกศรนำทางที่ปรากฏขึ้นเมื่อคุณวางเมาส์เหนือภาพ เอฟเฟกต์ภาพเคลื่อนไหวสไลด์ 10 ประเภทและอีกมากมาย...
การตรวจสอบพบว่าค่อนข้างครอบคลุม แต่ยังให้ข้อมูลไม่เพียงพอเนื่องจากมีการพิจารณาผลิตภัณฑ์จำนวนมาก คุณสามารถดูรายละเอียดทั้งหมดและคำอธิบายโดยละเอียดเกี่ยวกับฟังก์ชันการทำงานของปลั๊กอินเฉพาะได้โดยตรงจากหน้าของนักพัฒนา ฉันหวังเพียงว่าจะทำให้ใครบางคนค้นพบเครื่องมือที่จำเป็นมากในการสร้างแถบเลื่อนรูปภาพสีสันสดใสบนหน้าเว็บไซต์ของพวกเขาได้ง่ายขึ้น
ด้วยความเคารพ แอนดรูว์
เมื่อไม่นานมานี้ ฉันเริ่มเรียน 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); )); var หยุดชั่วคราว = เท็จ; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); Pause = True;), function()(pause = false; rotator(); )); โรเตอร์(); -
ขั้นแรกการตั้งค่าจะถูกบันทึกในตัวแปร: hwSlideSpeed - ความเร็วในการหมุนสไลด์, hwTimeOut - เวลาที่สไลด์เปลี่ยนโดยอัตโนมัติ hwNeedLinks - ควบคุมลิงก์ "ถัดไป" และ "ก่อนหน้า" - หากค่าของตัวแปรนี้คือ จริง ลิงก์เหล่านี้จะปรากฏขึ้นและหากเป็นเท็จ ลิงก์เหล่านั้นจะไม่เป็นเช่นนั้น (เช่นเดียวกับหน้าหลักของบล็อกของฉัน)
ต่อไป เราตั้งค่าคุณสมบัติ CSS ที่จำเป็นสำหรับสไลด์โดยใช้เมธอด .css() เราซ้อนบล็อกที่มีสไลด์ซ้อนกันโดยใช้การวางตำแหน่งที่แน่นอน จากนั้นซ่อนบล็อกทั้งหมดซ่อน() จากนั้นแสดงเฉพาะอันแรกเท่านั้น ตัวแปร slideNum คือหมายเลขของสไลด์ที่ใช้งานอยู่ ซึ่งก็คือตัวนับ
ตรรกะหลักของแถบเลื่อน 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 คุณภาพสูงลงในไซต์ของคุณ คุณจะพบคำอธิบายเกี่ยวกับปลั๊กอินที่จำเป็นในบทความนี้ แม้ว่า JQuery จะทำให้การทำงานกับ JavaScript ง่ายขึ้นมาก แต่เรายังคงต้องการปลั๊กอินเพื่อเร่งกระบวนการออกแบบเว็บไซต์
เราสามารถเปลี่ยนแปลงปลั๊กอินเหล่านี้บางส่วนและสร้างแถบเลื่อนใหม่ที่เหมาะกับวัตถุประสงค์ของไซต์ของเรามากขึ้น
สำหรับแถบเลื่อนอื่นๆ คุณเพียงแค่ต้องเพิ่มชื่อเรื่อง รูปภาพ และเลือกเอฟเฟ็กต์การเปลี่ยนสไลด์ที่มาพร้อมกับแถบเลื่อน ปลั๊กอินทั้งหมดเหล่านี้มาพร้อมกับเอกสารโดยละเอียด ดังนั้นการเพิ่มเอฟเฟกต์หรือฟังก์ชันใหม่ๆ ให้กับปลั๊กอินเหล่านั้นจึงไม่ใช่เรื่องยาก คุณยังสามารถเปลี่ยนทริกเกอร์ตามเหตุการณ์ได้หากคุณเป็นโปรแกรมเมอร์ JQuery ที่มีประสบการณ์
แนวโน้มล่าสุด เช่น การออกแบบที่ตอบสนองมีความสำคัญมากสำหรับโครงการเว็บ ไม่ว่าคุณจะใช้งานปลั๊กอินหรือสคริปต์ก็ตาม องค์ประกอบทั้งหมดเหล่านี้ทำให้แต่ละปลั๊กอินมีความยืดหยุ่นมาก ทุกสิ่งที่ออกมาในปี 2014 รวมอยู่ในรายการนี้
ตัวเลื่อนรูปภาพ JQuery Jssor Responsive Sliderฉันเพิ่งเจอแถบเลื่อน JQuery อันทรงพลังนี้ และได้เห็นโดยตรงว่ามันทำงานได้ดีมาก มันมีความเป็นไปได้ที่ไร้ขีดจำกัดซึ่งสามารถขยายได้ผ่านโค้ดโอเพ่นซอร์สของแถบเลื่อน:
- การออกแบบที่ปรับเปลี่ยนได้
- ตัวเลือกการปรับแต่งมากกว่า 15 แบบ;
- เอฟเฟกต์การเปลี่ยนภาพมากกว่า 15 แบบ;
- แกลเลอรี่ภาพ, ม้าหมุน, รองรับขนาดเต็มหน้าจอ;
- ตัวหมุนแบนเนอร์แนวตั้ง รายการสไลด์
- การสนับสนุนวิดีโอ
สาธิต | ดาวน์โหลด
PgwSlider - ตัวเลื่อนตอบสนองตาม JQuery / Zeptoงานเดียวของปลั๊กอินนี้คือการแสดงสไลด์รูปภาพ มีขนาดกะทัดรัดมาก เนื่องจากไฟล์ JQuery มีขนาดเพียง 2.5 KB ซึ่งช่วยให้โหลดได้เร็วมาก:
- รูปแบบที่ปรับเปลี่ยนได้
- การเพิ่มประสิทธิภาพ SEO;
- รองรับเบราว์เซอร์ที่แตกต่างกัน
- การเปลี่ยนภาพอย่างง่าย
- ขนาดไฟล์เก็บถาวรเพียง 2.5 KB
สาธิต | ดาวน์โหลด
แถบเลื่อน JQuery ที่ยืดหยุ่นและมีประโยชน์ ออกแบบมาสำหรับแหล่งข่าวพร้อมรายการสิ่งพิมพ์ทางด้านซ้ายและรูปภาพที่แสดงทางด้านขวา:
- การออกแบบที่ปรับเปลี่ยนได้
- คอลัมน์แนวตั้งสำหรับเปลี่ยนข่าว
- ส่วนหัวที่ขยาย
สาธิต | ดาวน์โหลด
แถบเลื่อนนี้ไม่มี jQuery แต่ฉันอยากจะนำเสนอเนื่องจากมีขนาดกะทัดรัดมากและสามารถลดเวลาในการโหลดหน้าเว็บได้อย่างมาก แจ้งให้เราทราบหากคุณชอบ:
- รูปแบบที่ปรับเปลี่ยนได้
- การออกแบบที่เรียบง่าย
- ตัวเลือกการเปลี่ยนสไลด์ต่างๆ
- รหัส JavaScript ขั้นต่ำ;
- ขนาดเพียง 3KB
สาธิต | ดาวน์โหลด
แกลเลอรีสไตล์ที่กระจายเอกสารบนโต๊ะพร้อมเค้าโครงที่ยืดหยุ่นและการออกแบบที่สวยงามน่าจะเป็นที่สนใจของหลายๆ คน เหมาะสำหรับแท็บเล็ตและจอแสดงผลขนาดใหญ่:
- แถบเลื่อนแบบปรับได้;
- การออกแบบที่เรียบ;
- การเปลี่ยนสไลด์แบบสุ่ม
- เข้าถึงซอร์สโค้ดแบบเต็ม
สาธิต | ดาวน์โหลด
สาธิต | ดาวน์โหลด
HiSlider ได้เปิดตัวปลั๊กอินตัวเลื่อน jQuery ฟรีใหม่ ซึ่งคุณสามารถสร้างแกลเลอรีรูปภาพที่หลากหลายพร้อมการเปลี่ยนภาพที่ยอดเยี่ยม:
- แถบเลื่อนแบบปรับได้;
- ไม่ต้องการความรู้ด้านการเขียนโปรแกรม
- เทมเพลตและสกินที่น่าทึ่งมากมาย
- เอฟเฟกต์การเปลี่ยนแปลงที่สวยงาม
- รองรับแพลตฟอร์มต่าง ๆ
- เข้ากันได้กับ WordPress, Joomla, Drupal;
- ความสามารถในการแสดงเนื้อหาประเภทต่าง ๆ : รูปภาพ, วิดีโอ YouTube และวิดีโอ Vimeo;
- การตั้งค่าที่ยืดหยุ่น
- คุณสมบัติเพิ่มเติมที่เป็นประโยชน์
- แสดงเนื้อหาได้ไม่จำกัดจำนวน
สาธิต |ดาวน์โหลด
WOW Slider เป็นตัวเลื่อนรูปภาพ jQuery ที่ตอบสนองพร้อมเอฟเฟกต์ภาพที่น่าทึ่ง (โดมิโน, หมุน, เบลอ, พลิกและแฟลช, บินออก, มู่ลี่) และเทมเพลตระดับมืออาชีพ
WOW Slider มาพร้อมกับวิซาร์ดการติดตั้งที่ช่วยให้คุณสามารถสร้างแถบเลื่อนที่ยอดเยี่ยมได้ภายในไม่กี่วินาที โดยไม่ต้องเข้าใจโค้ดหรือแก้ไขรูปภาพ เวอร์ชันของปลั๊กอินสำหรับ Joomla และ WordPress พร้อมให้ดาวน์โหลดแล้ว:
- ตอบสนองอย่างเต็มที่
- รองรับเบราว์เซอร์และอุปกรณ์ทุกประเภท
- รองรับอุปกรณ์สัมผัส
- ติดตั้งง่ายบน WordPress;
- ความยืดหยุ่นในการกำหนดค่า
- เพิ่มประสิทธิภาพ SEO
สาธิต |ดาวน์โหลด
Nivo Slider เป็นที่รู้จักไปทั่วโลกว่าเป็นแถบเลื่อนรูปภาพที่สวยงามและใช้งานง่ายที่สุด ปลั๊กอิน Nivo Slider นั้นฟรีและเผยแพร่ภายใต้ลิขสิทธิ์ MIT:
- ต้องใช้ JQuery 1.7 ขึ้นไป
- เอฟเฟกต์การเปลี่ยนแปลงที่สวยงาม
- ง่ายและยืดหยุ่นในการกำหนดค่า
- กะทัดรัดและปรับเปลี่ยนได้
- โอเพ่นซอร์ส;
- ทรงพลังและเรียบง่าย
- เทมเพลตที่แตกต่างกันหลายแบบ
- การครอบตัดรูปภาพอัตโนมัติ
สาธิต |ดาวน์โหลด
แนวคิดนี้ได้รับแรงบันดาลใจจากแถบเลื่อนของ Apple ซึ่งมีองค์ประกอบเล็กๆ หลายอย่างสามารถลอยออกไปพร้อมกับเอฟเฟกต์แอนิเมชั่นที่แตกต่างกันได้ นักพัฒนาพยายามนำแนวคิดนี้ไปใช้โดยคำนึงถึงข้อกำหนดขั้นต่ำสำหรับการสร้างการออกแบบร้านค้าออนไลน์แบบง่ายๆ ซึ่งองค์ประกอบ "การบิน" แสดงถึงหมวดหมู่ต่างๆ:
- รูปแบบที่ปรับเปลี่ยนได้
- การออกแบบที่เรียบง่าย
- เอฟเฟกต์การเลื่อนออกและการเปลี่ยนสไลด์ต่างๆ
สาธิต |ดาวน์โหลด
แถบเลื่อนที่เรียบง่ายซึ่งใช้พื้นที่ 100% ของความกว้างของหน้าและปรับให้เข้ากับขนาดหน้าจอของอุปกรณ์มือถือ มันใช้งานได้กับการเปลี่ยน CSS และรูปภาพจะ “ซ้อนกัน” พร้อมกับจุดยึด สามารถเปลี่ยนหรือถอดสมอออกได้หากคุณไม่ต้องการแนบลิงก์ไปยังรูปภาพ
เมื่อติดตั้งแล้ว ตัวเลื่อนจะขยายเป็น 100% ของความกว้างหน้าจอ นอกจากนี้ยังสามารถลดขนาดภาพสไลด์ได้โดยอัตโนมัติ:
- แถบเลื่อน JQuery ที่ปรับเปลี่ยนได้
- ขนาดเต็ม;
- การออกแบบที่เรียบง่าย
สาธิต |ดาวน์โหลด
Elastic Content Slider จะปรับความกว้างและความสูงโดยอัตโนมัติตามขนาดขององค์ประกอบหลัก นี่คือแถบเลื่อน jQuery ที่เรียบง่าย ประกอบด้วยพื้นที่สไลด์ที่ด้านบน และแถบแท็บการนำทางที่ด้านล่าง แถบเลื่อนจะปรับความกว้างและความสูงตามขนาดของคอนเทนเนอร์หลัก
เมื่อดูบนหน้าจอแนวทแยงขนาดเล็ก แท็บการนำทางจะกลายเป็นไอคอนขนาดเล็ก:
- การออกแบบที่ปรับเปลี่ยนได้
- การคลิกเมาส์เลื่อน
สาธิต |ดาวน์โหลด
แถบเลื่อนทดลองที่เลื่อนดูภาพในรูปแบบ 3 มิติ ทั้งสองปึกมีลักษณะคล้ายกับปึกกระดาษ ซึ่งเมื่อเลื่อน รูปภาพจะแสดงที่กึ่งกลางของแถบเลื่อน:
- การออกแบบที่ปรับเปลี่ยนได้
- พลิก - การเปลี่ยนแปลง;
- เอฟเฟกต์ 3 มิติ
สาธิต |ดาวน์โหลด
บทช่วยสอนนี้จะแสดงวิธีสร้างแถบเลื่อนแบบหักมุม แนวคิดก็คือ "ตัด" และแสดงสไลด์ปัจจุบันเมื่อคุณเปิดภาพถัดไปหรือก่อนหน้า การใช้ภาพเคลื่อนไหว JQuery และ CSS เราสามารถสร้างเอฟเฟกต์การเปลี่ยนแปลงที่เป็นเอกลักษณ์ได้:
- การออกแบบที่ปรับเปลี่ยนได้
- การเปลี่ยนแปลงแบบแยกส่วน
- แถบเลื่อนแบบเต็มหน้าจอ
สาธิต |ดาวน์โหลด
ไม่มีเสียงระฆังและนกหวีดที่ไม่จำเป็น ขนาดน้อยกว่า 3KB ใช้โค้ด HTML สำหรับสไลด์ของคุณ และขยายด้วย CSS ทุกอย่างที่เกี่ยวข้องกับ Unslider นั้นโฮสต์อยู่บน GitHub:
- รองรับเบราว์เซอร์ต่าง ๆ
- รองรับคีย์บอร์ด;
- ปรับความสูง;
- การออกแบบที่ปรับเปลี่ยนได้
- รองรับการป้อนข้อมูลแบบสัมผัส
สาธิต | ดาวน์โหลด
ปลั๊กอินที่เรียบง่ายและกะทัดรัด (ขนาดเพียง 1 KB) ที่สร้างแถบเลื่อนแบบตอบสนองโดยใช้องค์ประกอบภายในคอนเทนเนอร์ ResponsiveSLides.js ทำงานร่วมกับเบราว์เซอร์ได้หลากหลาย รวมถึง IE ทุกเวอร์ชันตั้งแต่ IE6 ขึ้นไป:
- ตอบสนองอย่างเต็มที่
- ขนาด 1 กิโลไบต์;
- การเปลี่ยน CSS3 พร้อมความสามารถในการทำงานผ่าน JavaScript
- มาร์กอัปอย่างง่ายโดยใช้รายการสัญลักษณ์แสดงหัวข้อย่อย
- ความสามารถในการปรับแต่งเอฟเฟ็กต์การเปลี่ยนแปลงและระยะเวลาการดูสไลด์เดียว
- รองรับความสามารถในการสร้างสไลด์โชว์หลายรายการ
- การเลื่อนแบบอัตโนมัติและแบบแมนนวล
สาธิต |ดาวน์โหลด
กล้องเป็นปลั๊กอินที่มีเอฟเฟกต์การเปลี่ยนแปลงมากมายและรูปแบบที่ตอบสนอง ติดตั้งง่าย รองรับโดยอุปกรณ์มือถือ:
- การออกแบบที่ตอบสนองอย่างเต็มที่
- ลายเซ็น;
- ความสามารถในการเพิ่มวิดีโอ
- 33 ไอคอนสีที่แตกต่างกัน
สาธิต |ดาวน์โหลด
SlidesJS เป็นปลั๊กอินตอบสนองสำหรับ JQuery (1.7.1 ขึ้นไป) พร้อมรองรับอุปกรณ์สัมผัสและการเปลี่ยน CSS3 ทดลองใช้งาน ลองตัวอย่างสำเร็จรูปบางส่วนที่จะช่วยให้คุณทราบวิธีเพิ่ม SlidesJS ในโครงการของคุณ:
- การออกแบบที่ปรับเปลี่ยนได้
- การเปลี่ยน CSS3;
- รองรับอุปกรณ์สัมผัส
- ติดตั้งง่าย.
สาธิต | ดาวน์โหลด
นี่คือแถบเลื่อน jQuery ที่ตอบสนองฟรี:
- ตอบสนองอย่างเต็มที่ – ปรับให้เข้ากับอุปกรณ์ใดก็ได้
- การเปลี่ยนสไลด์แนวนอนและแนวตั้ง
- สไลด์สามารถประกอบด้วยรูปภาพ วิดีโอ หรือเนื้อหา HTML;
- ขยายการสนับสนุนสำหรับอุปกรณ์สัมผัส
- การใช้การเปลี่ยน CSS สำหรับภาพเคลื่อนไหวสไลด์ (การเร่งด้วยฮาร์ดแวร์)
- Callback API และวิธีการสาธารณะโดยสมบูรณ์
- ขนาดไฟล์เล็ก
- ง่ายต่อการปฏิบัติ
สาธิต |ดาวน์โหลด
แถบเลื่อนที่ตอบสนองได้ดีที่สุด เวอร์ชันใหม่ได้รับการปรับปรุงเพื่อเพิ่มความเร็วและความกะทัดรัด
สาธิต | ดาวน์โหลด
Galleria ถูกใช้บนไซต์หลายล้านแห่งเพื่อสร้างแกลเลอรีภาพคุณภาพสูง จำนวนบทวิจารณ์เชิงบวกเกี่ยวกับงานของเธอนั้นอยู่นอกแผนภูมิ:
- ฟรีโดยสมบูรณ์;
- โหมดการรับชมแบบเต็มหน้าจอ
- ปรับตัวได้ 100%;
- ไม่จำเป็นต้องมีประสบการณ์ด้านการเขียนโปรแกรม
- รองรับ iPhone, iPad และอุปกรณ์สัมผัสอื่น ๆ
- Flickr, Vimeo, YouTube และอีกมากมาย;
- หลายหัวข้อ
สาธิต | ดาวน์โหลด
ฉันขอนำเสนอแถบเลื่อนรูปภาพ jQuery ที่เขียนขึ้นเพื่อการออกแบบเว็บแบบตอบสนองโดยเฉพาะ Blueberry เป็นปลั๊กอินตัวเลื่อนรูปภาพโอเพ่นซอร์สรุ่นทดลองที่เขียนขึ้นเพื่อทำงานกับเทมเพลตที่ตอบสนองโดยเฉพาะ:
- การออกแบบขั้นต่ำ
- รูปแบบที่ปรับเปลี่ยนได้
- การนำเสนอ
สาธิต | ดาวน์โหลด
มีการใช้องค์ประกอบมาตรฐานของโปรแกรมเวอร์ชันแรก: แถบเลื่อนจะซ่อนไปทางซ้ายและปรากฏขึ้นทางด้านขวา องค์ประกอบการนำทางและคำอธิบายภาพเดียวกันที่ปรากฏขึ้นเมื่อวางเมาส์เหนือ:
- การออกแบบที่ปรับเปลี่ยนได้
- การสนับสนุนลายเซ็น;
- โหมดการนำเสนอภาพนิ่ง
สาธิต | ดาวน์โหลด