สร้างการนำเสนอภาพนิ่งโดยใช้เทมเพลตจาวาสคริปต์ แล็บภาพถ่าย การควบคุมสไลเดอร์

ภาพรวมของโปรแกรมสร้างสไลด์โชว์ การสร้างสไลด์โชว์สำหรับเว็บไซต์

เมื่อสร้างสไลด์โชว์เพื่อโพสต์บนเว็บไซต์ ควรใช้โซลูชันซอฟต์แวร์สำเร็จรูป ในความคิดของฉัน ตัวเลือกที่ดีที่สุดและง่ายที่สุดคือการใช้ jQuery ซึ่งเป็นไลบรารีสคริปต์พิเศษฟรี (โปรแกรม JavaScript ขนาดเล็ก) บทความก่อนหน้านี้ได้พูดคุยเกี่ยวกับเครื่องมือพัฒนาเว็บไซต์ที่ยอดเยี่ยมนี้แล้ว ตัวอย่างเช่น ดูบทความแกลเลอรีรูปภาพ jQuery- เรียบง่ายและสวยงาม! . ตอนนี้เรามาใช้ jQuery เพื่อสร้างการนำเสนอภาพนิ่งบนไซต์ที่เรียกว่าแถบเลื่อน

ในการดำเนินการนี้ เราจะใช้ปลั๊กอิน Slides ที่สร้างโดยโปรแกรมเมอร์ Nathan Searles ผู้อำนวยการด้านเทคนิคของสตูดิโอออกแบบ "The Brigade" ในพอร์ตแลนด์ รัฐโอเรกอน สหรัฐอเมริกา การพัฒนาอีกประการหนึ่งของเขาได้อธิบายไว้ในบทความ แกลเลอรีรูปภาพ สำหรับร้านค้าออนไลน์

ปลั๊กอิน Slides ติดตั้งง่าย มีหลายตัวเลือกในการเปลี่ยนรูปภาพในการนำเสนอสไลด์ และมักใช้สำหรับส่วนหัวของไซต์ ตัวอย่างการทำงานของแถบเลื่อนนี้กับการตั้งค่าเริ่มต้นแสดงในรูป:

การติดตั้งสไลด์โชว์ สไลด์

และเช่นเคย ขั้นแรกให้สร้างโฟลเดอร์สคริปต์บนไซต์ จากนั้นคุณจะต้องดาวน์โหลดไฟล์เก็บถาวรและแตกไฟล์ลงในโฟลเดอร์ที่สร้างขึ้น จะมีสองสคริปต์ jquery-1.8.3.min.js และ jquery.cycle.all.min.js

ต่อไป ในชื่อหน้าภายในแท็ก... เราแทรกบรรทัดต่อไปนี้ ซึ่งระบุเส้นทางไปยังสคริปต์และจาวาสคริปต์ขนาดเล็กที่กำหนดพารามิเตอร์ของการนำเสนอภาพนิ่ง:

$(".สไลด์โชว์").รอบ((
fx: "จางหายไป"
});
});

.สไลด์โชว์(
ความกว้าง: 200px;
ส่วนสูง: 135px;
ระยะขอบ: อัตโนมัติ;
}

อย่างที่คุณเห็นยังมีกฎ CSS ง่ายๆ ที่คุณต้องระบุขนาดของหน้าต่างสำหรับรูปภาพของการนำเสนอสไลด์ในอนาคต (กว้าง - สูง) โดยปกติแล้ว รูปภาพทั้งหมดจะต้องมีขนาดเท่ากัน หากต้องการ คุณสามารถขยายตัวเลือก CSS ได้โดยการเพิ่ม เช่น เส้นขอบ พื้นหลัง ช่องว่างภายใน และองค์ประกอบอื่นๆ สำหรับภาพสไลด์โชว์ของคุณ ในกรณีนี้ คุณต้องระบุขนาดทั้งหมด นั่นคือ รูปภาพ บวกกับการเยื้องและเส้นขอบตามความยาวและความกว้างที่คุณกำหนด

โน๊ตสำคัญ:หากไซต์ของคุณใช้ปลั๊กอิน jQuery หลายตัว จะสะดวกกว่าในการย้ายไฟล์ jquery.js (ควรเป็นเวอร์ชันล่าสุด) ไปยังโฟลเดอร์รูทเพื่อไม่ให้ดาวน์โหลดหลายครั้ง ในกรณีนี้ บรรทัดสำหรับเข้าถึงจะมีลักษณะเหมือนกันสำหรับปลั๊กอินทั้งหมด โดยเฉพาะอย่างยิ่งสำหรับตัวอย่างของเราปรากฎดังนี้:

ไม่แนะนำให้ใช้ jQuery หลายเวอร์ชันในหน้าเดียวกันเพื่อไม่ให้ขัดแย้งกัน ในเวลาเดียวกัน โปรดตรวจสอบว่าปลั๊กอินใช้งานได้กับ jQuery เวอร์ชันที่ติดตั้งไว้ เนื่องจากไม่ใช่ทุกเวอร์ชันที่สามารถใช้แทนกันได้

ขั้นตอนสุดท้ายคือการวางรูปภาพบนหน้า ทุกอย่างก็เรียบง่ายที่นี่เช่นกัน วางรูปภาพไว้ในแท็กหรือแท็กอื่นที่ให้คุณกำหนดความกว้างและความสูง และระบุ class="slideshow" สำหรับตัวอย่างของเรา โค้ด HTML สำหรับแถบเลื่อนจะมีลักษณะดังนี้:

ณ จุดนี้ การสร้างสไลด์โชว์ใกล้เสร็จสมบูรณ์แล้ว และคุณสามารถดูได้โดยเปิดเพจของคุณในเบราว์เซอร์

การตั้งค่าตัวเลือกการนำเสนอภาพนิ่ง สไลด์

ในสไลด์โชว์ที่สร้างขึ้น คุณสามารถตั้งค่าการเปลี่ยนประเภทต่างๆ ระหว่างเฟรมได้โดยการเปลี่ยนจาวาสคริปต์ที่อยู่ในส่วนหัวของหน้า นอกจากนี้ ด้วยการแทนที่บรรทัด sync:false ในสคริปต์ด้วย sync:true คุณสามารถลบช่องว่างเมื่อเปลี่ยนรูปภาพได้

ระยะเวลาในการแสดงภาพจะถูกควบคุมโดยพารามิเตอร์การหมดเวลา และความเร็วโดยพารามิเตอร์ความเร็ว ตามตัวอย่าง ต่อไปนี้เป็นตัวเลือกการแสดงภาพสไลด์ทั่วไปและสคริปต์ที่เกี่ยวข้องที่ควรแทรกลงในส่วนหัวของหน้า

1. การเลิกกิจการ (ตัวอย่างของเรา): $(เอกสาร).ready(ฟังก์ชั่น() ( $(".สไลด์โชว์").รอบ(( fx: "จาง", //ประเภทการเปลี่ยนผ่าน ความเร็ว: 1,000 , // ความเร็วในการเปลี่ยนภาพ หมดเวลา: 1,000 // ระยะเวลาเฟรม }); });
2. การสับเปลี่ยน: $(เอกสาร).ready(ฟังก์ชั่น() ( $(".สไลด์โชว์").รอบ(( fx: "สับเปลี่ยน", ซิงค์: เท็จ ความเร็ว: 500 หมดเวลา: 5,000 }); });
3. ซูม: $(เอกสาร).ready(ฟังก์ชั่น() ( $(".สไลด์โชว์").รอบ(( fx: "ซูม", ซิงค์: เท็จ }); });
4. พลิกแกน X หรือ Y: $(เอกสาร).ready(ฟังก์ชั่น() ( $(".สไลด์โชว์").รอบ(( fx: "curtainX", // สำหรับการหมุนตามแกน Y - CurtainY ซิงค์: เท็จ }); });
5. ยุบในแนวตั้ง: $(เอกสาร).ready(ฟังก์ชั่น() ( $(".สไลด์โชว์").รอบ(( fx: "turnDown", // สามารถตั้งค่าทิศทางได้ TurnUp, TurnLeft, TurnRight ซิงค์: จริง }); });
6. การเลื่อน (ออฟเซ็ต): $(เอกสาร).ready(ฟังก์ชั่น() ( $(".สไลด์โชว์").รอบ(( fx:"scrollDown", // สามารถตั้งค่าทิศทางออฟเซ็ตได้ scrollUp, scrollLeft, scrollRight ซิงค์: จริง }); });
7. จางไปทางขวา: $(เอกสาร).ready(ฟังก์ชั่น() ( $(".สไลด์โชว์").รอบ(( fx: "ปก }); });

บางครั้งคุณจำเป็นต้องวางตัวเลือกสไลด์โชว์หลายตัวเลือกในหน้าเดียวของไซต์ ดังที่ทำในบทความนี้ ในการดำเนินการนี้ คุณเพียงแค่ต้องระบุคลาสที่แตกต่างกันสำหรับแต่ละตัวเลือกในบรรทัด $(".slideshow").cycle(( (ดูโค้ดในตารางด้านบน) และอย่าลืมระบุขนาดหน้าต่างสำหรับแต่ละคลาส ใน CSS

หากสไลด์มีเพียงรูปภาพ คุณสามารถเปลี่ยนโครงสร้างได้เล็กน้อย:

ก่อนหน้าถัดไป

อย่าลืมเพิ่มค่าที่มีความหมายให้กับแอตทริบิวต์ alt

หากต้องการใช้ลิงก์เพจ คุณสามารถทำสิ่งต่อไปนี้:

... ... ... 1 2 3

ก่อนหน้า ถัดไป 1 2 3

โปรดสังเกตการใช้แอตทริบิวต์ "ข้อมูล" - การแสดงสไลด์บางรายการสามารถแทรกรูปภาพเป็นพื้นหลังได้ และคุณลักษณะเหล่านี้จะถูกใช้ในสคริปต์เป็นที่สำหรับเชื่อมต่อพื้นหลังและสไลด์

การใช้รายการ วิธีการที่ถูกต้องทางความหมายคือการใช้รายการเป็นสไลด์ ในกรณีนี้ โครงสร้างจะเป็นดังนี้:

หากมีการกำหนดลำดับของสไลด์ไว้อย่างดี (เช่น ในงานนำเสนอ) คุณสามารถใช้รายการลำดับเลขได้

CSS เริ่มจากโครงสร้างต่อไปนี้:

ก่อนหน้าถัดไป

เพราะ เนื่องจากสไลด์โชว์จะทำงานจากขวาไปซ้าย คอนเทนเนอร์ด้านนอกจะมีขนาดคงที่ และคอนเทนเนอร์ด้านในจะกว้างขึ้นเนื่องจากมีสไลด์ทั้งหมด สไลด์แรกจะปรากฏให้เห็น สิ่งนี้ถูกตั้งค่าผ่านการโอเวอร์โฟลว์:

ตัวเลื่อน ( ความกว้าง: 1024px; ล้น: ซ่อนไว้; ) .slider-wrapper ( ความกว้าง: 9999px; ความสูง: 683px; ตำแหน่ง: ญาติ; การเปลี่ยนแปลง: ซ้าย 500ms เชิงเส้น; )

รูปแบบกระดาษห่อภายในประกอบด้วย:

กว้างใหญ่
- ความสูงคงที่, ความสูงสไลด์สูงสุด
- ตำแหน่ง: สัมพันธ์ซึ่งจะช่วยให้คุณสร้างการเคลื่อนไหวของสไลด์ได้
- เหลือการเปลี่ยน CSS ซึ่งจะทำให้การเคลื่อนไหวราบรื่น เพื่อความง่าย เราไม่ได้รวมคำนำหน้าทั้งหมดไว้ คุณยังสามารถใช้การแปลง CSS (ร่วมกับการแปล) สำหรับสิ่งนี้ได้

สไลด์มีแอตทริบิวต์ลอยเพื่อให้เรียงกัน พวกมันอยู่ในตำแหน่งที่ค่อนข้างมากเพื่อให้คุณได้รับออฟเซ็ตด้านซ้ายใน JS เราใช้มันเพื่อสร้างเอฟเฟกต์การเลื่อน

สไลด์ ( ลอย: ซ้าย; ตำแหน่ง: สัมพันธ์; ความกว้าง: 1024px; ความสูง: 683px; )

แม้ว่าเราจะกำหนดความกว้างไว้แล้ว แต่ในสคริปต์เราสามารถเปลี่ยนได้โดยการคูณจำนวนสไลด์ด้วยความกว้างของสไลด์ คุณไม่มีทางรู้ว่าคุณต้องการความกว้างเท่าใด

การนำทางดำเนินการผ่านปุ่ม "ก่อนหน้า" และ "ถัดไป" เรารีเซ็ตสไตล์เริ่มต้นและกำหนดรูปแบบของเราเอง:

Slider-nav ( ความสูง: 40px; ความกว้าง: 100%; ขอบด้านบน: 1.5em; ) ปุ่ม .slider-nav ( เส้นขอบ: ไม่มี; จอแสดงผล: บล็อก; ความกว้าง: 40px; ความสูง: 40px; เคอร์เซอร์: ตัวชี้; เยื้องข้อความ : -9999em; สีพื้นหลัง: โปร่งใส; พื้นหลังซ้ำ: ไม่ซ้ำ; ) .slider-nav button.slider-previous ( float: left; ภาพพื้นหลัง: url(previous.png); ) ปุ่ม .slider-nav .slider-next ( float: right; ภาพพื้นหลัง: url(next.png); )

เมื่อใช้ลิงก์เพจแทนปุ่ม คุณสามารถสร้างสไตล์ต่อไปนี้:

Slider-nav ( text-align: center; margin-top: 1.5em; ) .slider-nav a ( จอแสดงผล: inline-block; ตกแต่งข้อความ: none; border: 1px solid #ddd; color: #444; width: 2em; ความสูง: 2em; line-height: 2; text-align: center; ) .slider-nav a.current ( border-color: #000; color: #000; Font-weight: Bold; )

คลาสเหล่านี้จะได้รับการกำหนดแบบไดนามิกจากสคริปต์

แนวทางนี้เหมาะกับเอฟเฟกต์การเลื่อน หากเราต้องการให้ได้เอฟเฟกต์เฟดอิน เราจำเป็นต้องเปลี่ยนสไตล์ เนื่องจาก float จะเพิ่มช่องว่างในแนวนอนระหว่างสไลด์ นั่นคือเราไม่ต้องการสไลด์ในบรรทัดเดียว - เราต้องการสไลด์ "ชุด":

Slider ( ความกว้าง: 1024px; ระยะขอบ: 2em auto; ) .slider-wrapper ( ความกว้าง: 100%; ความสูง: 683px; ตำแหน่ง: ญาติ; /* สร้างบริบทสำหรับการวางตำแหน่งที่แน่นอน */ ) .slide ( ตำแหน่ง: แน่นอน; /* ตำแหน่งที่แน่นอนของสไลด์ทั้งหมด */ ความกว้าง: 100%; ความสูง: 100%; ความทึบ: 0; /* สไลด์ทั้งหมดถูกซ่อนไว้ */ การเปลี่ยนแปลง: ความทึบเชิงเส้น 500ms; ) /* เริ่มแรกจะมองเห็นได้เฉพาะสไลด์แรกเท่านั้น */ .slider- กระดาษห่อ >
เราใช้คุณสมบัติความทึบเพื่อซ่อนสไลด์เนื่องจากโปรแกรมอ่านหน้าจอจะข้ามเนื้อหาขององค์ประกอบที่มีการแสดงผล: ไม่มี (ดู CSS ในการใช้งานจริง: เนื้อหาที่มองไม่เห็นสำหรับผู้ใช้โปรแกรมอ่านหน้าจอเท่านั้น)

ด้วยการวางตำแหน่งตามบริบทของ CSS เราจึงสร้าง "สแต็ก" ของสไลด์ โดยที่สไลด์สุดท้ายในแหล่งที่มาจะอยู่ข้างหน้าสไลด์อื่นๆ แต่นั่นไม่ใช่สิ่งที่เราต้องการ เพื่อรักษาลำดับของสไลด์ เราจำเป็นต้องซ่อนสไลด์ทั้งหมดยกเว้นสไลด์แรก

JS ใช้การเปลี่ยนแปลง CSS เปลี่ยนค่าของคุณสมบัติความทึบของสไลด์ปัจจุบัน และรีเซ็ตค่านี้เป็นศูนย์สำหรับสิ่งอื่นๆ ทั้งหมด

รหัส JavaScript สไลด์โชว์ที่ไม่มีการแบ่งหน้า สไลด์โชว์ที่ไม่มีการแบ่งหน้า ใช้งานได้โดยคลิกปุ่ม "ถัดไป" และ "ก่อนหน้า" พวกเขาสามารถมองได้ว่าเป็นตัวดำเนินการเพิ่มและลดค่า จะมีตัวชี้ (หรือเคอร์เซอร์) ที่จะเพิ่มขึ้นหรือลดลงทุกครั้งที่คุณกดปุ่มเสมอ ค่าเริ่มต้นคือ 0 และเป้าหมายคือการเลือกสไลด์ปัจจุบันในลักษณะเดียวกับการเลือกองค์ประกอบอาร์เรย์

ดังนั้นเมื่อเราคลิกถัดไปในครั้งแรก ตัวชี้จะเพิ่มขึ้น 1 และเราจะได้สไลด์ที่สอง เมื่อคลิกที่ก่อนหน้า เราจะย่อตัวชี้และได้สไลด์แรก ฯลฯ

นอกจากตัวชี้แล้ว เรายังใช้วิธี .eq() ของ jQuery เพื่อรับสไลด์ปัจจุบัน ใน JS บริสุทธิ์ดูเหมือนว่านี้:

ฟังก์ชั่น สไลด์โชว์(องค์ประกอบ) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

ข้อควรจำ - NodeList ใช้ดัชนีเหมือนกับอาร์เรย์ อีกวิธีในการเลือกสไลด์ปัจจุบันคือใช้ตัวเลือก CSS3:

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

ตัวเลือก CSS3:nth-child() นับองค์ประกอบที่เริ่มต้นจาก 1 ดังนั้นคุณต้องเพิ่ม 1 ให้กับพอยน์เตอร์ หลังจากเลือกสไลด์แล้ว จะต้องย้ายคอนเทนเนอร์หลักจากขวาไปซ้าย ใน jQuery คุณสามารถใช้เมธอด .animate() ได้:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", สไลด์: ".slide", //... ความเร็ว: 500, การค่อยๆ เปลี่ยน : "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element) เคลื่อนไหว(( ซ้าย : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

ไม่มีวิธีการ .animate() ใน JS ปกติ ดังนั้นเราจึงใช้การเปลี่ยน CSS:

Slider-wrapper ( ตำแหน่ง: สัมพันธ์; // การเปลี่ยนแปลงที่จำเป็น: เหลือเส้นตรง 500ms; )

ตอนนี้คุณสามารถเปลี่ยนคุณสมบัติด้านซ้ายแบบไดนามิกผ่านวัตถุสไตล์:

ฟังก์ชั่น สไลด์โชว์(องค์ประกอบ) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "- " + currentSlide.offsetLeft + "px"; ) );

ตอนนี้เราจำเป็นต้องสร้างเหตุการณ์การคลิกสำหรับการควบคุมแต่ละรายการ ใน jQuery คุณสามารถใช้เมธอด .on() และใน JS ล้วนๆ คุณสามารถใช้เมธอด addEventListener() ได้

คุณต้องตรวจสอบด้วยว่าตัวชี้ถึงขอบเขตรายการหรือไม่ - 0 สำหรับ "ก่อนหน้า" และจำนวนสไลด์ทั้งหมดสำหรับ "ถัดไป" ในแต่ละกรณี คุณจะต้องซ่อนปุ่มที่เกี่ยวข้อง:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", สไลด์: ".slide", ก่อนหน้า: ".slider-previous", ถัดไป : ".slider-next", //... ความเร็ว: 500, การค่อยๆ เปลี่ยน: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element) eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), ดัชนี = 0, รวม = $(options.slides).length; $next.on("คลิก", function() ( index++; $previous.show(); if(index == รวม - 1) ( ดัชนี = รวม - 1; $next.hide(); ) slideTo(ดัชนี, $element); )); $previous.on("คลิก", function() ( ดัชนี--; $next.show(); if(index == 0) ( ดัชนี = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

และใน JS ล้วนๆ ดูเหมือนว่า:

ฟังก์ชั่น สไลด์โชว์(องค์ประกอบ) ( this.el = document.querySelector(องค์ประกอบ); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -ถัดไป"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), การกระทำ: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo (self.index) ); ), false); self.previous.addEventListener("คลิก", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self.next.style.display = "block"; if(self.index == 0) ( ตนเอง .index = 0;self.previous.style.display = "ไม่มี"; ) self._slideTo(self.index); ), เท็จ); ) );

สไลด์โชว์แบบแบ่งหน้า ในสไลด์โชว์ประเภทนี้ แต่ละลิงก์จะรับผิดชอบหนึ่งสไลด์ ดังนั้นจึงไม่จำเป็นต้องมีดัชนี ภาพเคลื่อนไหวจะไม่เปลี่ยนแปลง แต่เป็นวิธีที่ผู้ใช้เคลื่อนผ่านสไลด์ สำหรับ jQuery เราจะได้โค้ดต่อไปนี้:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", สไลด์: ".slide", nav: ".slider-nav", ความเร็ว : 500, การค่อยๆ เปลี่ยน: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element) เคลื่อนไหว(( ซ้าย: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(สิ่งนี้), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("current").siblings().removeClass("current"); )); )); ))(jQuery);

ในกรณีนี้ แต่ละจุดยึดจะสอดคล้องกับ ID ของสไลด์เฉพาะ ใน JS บริสุทธิ์ คุณสามารถใช้ทั้งมันและแอตทริบิวต์ data ซึ่งเก็บดัชนีตัวเลขของสไลด์ภายใน NodeList:

ตัวเลื่อนฟังก์ชัน(องค์ประกอบ) ( this.el = document.querySelector(องค์ประกอบ); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), นำทาง: function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

ตั้งแต่ IE10 คุณสามารถจัดการคลาสผ่าน classList:

Link.classList.add("ปัจจุบัน");

และด้วย IE11 สามารถรับแอตทริบิวต์ข้อมูลได้ผ่านคุณสมบัติชุดข้อมูล:

ดัชนี Var = parseInt(a.dataset.slide, 10) + 1;

สไลด์โชว์แบบแบ่งหน้าพร้อมการควบคุม สไลด์โชว์เหล่านี้นำเสนอความซับซ้อนบางอย่างให้กับโค้ด - คุณต้องผสมผสานการใช้ดัชนีและแฮชของหน้าเข้าด้วยกัน นั่นคือต้องเลือกสไลด์ปัจจุบันตามตำแหน่งตัวชี้และสไลด์ที่เลือกผ่านลิงก์

ซึ่งสามารถซิงโครไนซ์ผ่านดัชนีตัวเลขของแต่ละลิงก์ใน DOM หนึ่งลิงก์ - หนึ่งสไลด์ ดังนั้นดัชนีจะเป็น 0, 1, 2 เป็นต้น

ใน jQuery โค้ดจะเป็นดังนี้:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination: ".slider-pagination", //... ), options); $. fn.slideshow.index = 0; return this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // ดัชนีตัวเลข DOM $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == รวม - 1) ( $.fn.slideshow.index = รวม - 1; $next.hide(); ) อื่น ๆ ( $next.show(); ) slideTo($.fn.slideshow. ดัชนี, $องค์ประกอบ); $a.addClass("ปัจจุบัน"). พี่น้อง().removeClass("ปัจจุบัน"); )); )); ); //... ))(jQuery);

คุณสามารถเห็นได้ทันทีว่าการมองเห็นเคอร์เซอร์เปลี่ยนไป - ขณะนี้ดัชนีได้รับการประกาศเป็นคุณสมบัติของวัตถุสไลด์โชว์ วิธีนี้ช่วยให้เราหลีกเลี่ยงปัญหาขอบเขตที่สามารถสร้างได้โดยการเรียกกลับใน jQuery ขณะนี้เคอร์เซอร์สามารถใช้งานได้ทุกที่ แม้จะอยู่นอกเนมสเปซปลั๊กอินก็ตาม เนื่องจากเคอร์เซอร์ได้รับการประกาศให้เป็นทรัพย์สินสาธารณะของออบเจ็กต์สไลด์โชว์

.index() วิธีการให้ดัชนีตัวเลขของแต่ละลิงค์

ไม่มีวิธีการดังกล่าวใน JS ล้วนๆ ดังนั้นจึงใช้แอตทริบิวต์ข้อมูลได้ง่ายกว่า:

ตอนนี้เราสามารถเชื่อมต่อขั้นตอนของเรากับการอ้างอิงและใช้แอตทริบิวต์ข้อมูลที่เราเพิ่งสร้างขึ้นได้:

การกระทำ: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "ไม่มี "; ) อื่น ๆ ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(นี้); ), เท็จ); ) )

การทำความเข้าใจเกี่ยวกับมิติข้อมูล กลับไปที่กฎ CSS ต่อไปนี้:

Slider-wrapper ( ความกว้าง: 9999px; ความสูง: 683px; ตำแหน่ง: สัมพันธ์; การเปลี่ยนแปลง: ซ้าย 500ms เชิงเส้น; )

ถ้าเรามีสไลด์เยอะ 9999 ก็อาจจะไม่เพียงพอ คุณต้องปรับขนาดสไลด์ได้ทันทีตามความกว้างของแต่ละสไลด์และจำนวนสไลด์

ใน jQuery มันง่าย:

// สไลด์โชว์ความกว้างเต็มส่งคืน this.each(function() ( var $element = $(this), Total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * รวม); //... ));

ใช้ความกว้างของหน้าต่างและกำหนดความกว้างของแต่ละสไลด์ ความกว้างรวมของกระดาษห่อภายในได้มาจากการคูณความกว้างของหน้าต่างและจำนวนสไลด์

// สไลด์โชว์ความกว้างคงที่ ส่งคืน this.each(function() ( var $element = $(this), Total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * รวม); //... ));

ที่นี่ความกว้างเริ่มต้นถูกกำหนดเป็นความกว้างของแต่ละสไลด์ คุณเพียงแค่ต้องกำหนดความกว้างโดยรวมของกระดาษห่อ

ตอนนี้ภาชนะด้านในกว้างพอแล้ว ใน pure JS สิ่งนี้ทำได้ในลักษณะเดียวกันโดยประมาณ:

// สไลด์โชว์แบบเต็มความกว้าง Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // ความกว้างของวิวพอร์ต var winWidth = หน้าต่าง .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

เอฟเฟ็กต์เฟด เอฟเฟ็กต์เฟดมักใช้ในการนำเสนอสไลด์ สไลด์ปัจจุบันจะหายไปและสไลด์ถัดไปจะปรากฏขึ้น jQuery มีเมธอด fadeIn() และ fadeOut() ที่ใช้ได้กับทั้งคุณสมบัติความทึบและการแสดงผล ดังนั้นองค์ประกอบจะถูกลบออกจากหน้าเมื่อภาพเคลื่อนไหวเสร็จสิ้น (จอแสดงผล:ไม่มี)

ใน JS ล้วนๆ เป็นการดีที่สุดที่จะทำงานกับคุณสมบัติความทึบและใช้สแต็กการวางตำแหน่ง CSS จากนั้นในตอนแรกสไลด์จะมองเห็นได้ (ความทึบ: 1) และสไลด์อื่นๆ จะถูกซ่อนไว้ (ความทึบ: 0)

ชุดสไตล์ต่อไปนี้สาธิตวิธีการนี้:

Slider ( ความกว้าง: 100%; ล้น: ซ่อนไว้; ตำแหน่ง: ญาติ; ความสูง: 400px; ) .slider-wrapper ( ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: ญาติ; ) .slide ( ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100 %; ความสูง: 100%; ความทึบ: 0; ) .slider-wrapper > .slide:first-child ( ความทึบ: 1; )

ใน JS ล้วนๆ คุณต้องลงทะเบียนการเปลี่ยนแปลง CSS ของแต่ละสไลด์:

สไลด์ ( ลอย: ซ้าย; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; ความทึบ: 0; การเปลี่ยนแปลง: ความทึบ 500ms เชิงเส้น; )

ด้วย jQuery หากต้องการใช้เมธอด fadeIn() และ fadeOut() คุณต้องเปลี่ยนความทึบและการแสดงผล:

สไลด์ ( ลอย: ซ้าย; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 100%; จอแสดงผล: ไม่มี; ) .slider-wrapper > .slide:first-child ( จอแสดงผล: บล็อก; )

ใน jQuery รหัสจะเป็นดังนี้:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", ก่อนหน้า: ".slider-previous", ถัดไป: ".slider-next" , สไลด์: ".slide", nav: ".slider-nav", ความเร็ว: 500, การค่อยๆ เปลี่ยน: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides , องค์ประกอบ).eq(slide); $currentSlide.animate(( ความทึบ: 1 ), options.speed, options.easing). พี่น้อง(options.slides). css("opacity", 0); ); //. .. ); ))(jQuery);

เมื่อทำให้ความทึบของภาพเคลื่อนไหว คุณต้องเปลี่ยนค่าของคุณสมบัตินี้สำหรับสไลด์ที่เหลือด้วย

ใน JavaScript มันจะเป็น:

Slideshow.prototype = ( //... _slideTo: ฟังก์ชั่น(สไลด์) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; สำหรับ(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

องค์ประกอบของสื่อ: วิดีโอ เราสามารถรวมวิดีโอไว้ในสไลด์โชว์ได้ นี่คือตัวอย่างวิดีโอสไลด์โชว์จาก Vimeo:

รวมวิดีโอผ่าน iframe นี่เป็นบล็อกอินไลน์ที่เปลี่ยนได้เหมือนกับรูปภาพ ถอดเปลี่ยนได้ – เนื่องจากเนื้อหาถูกนำมาจากแหล่งภายนอก

หากต้องการสร้างสไลด์โชว์แบบเต็มหน้า คุณต้องเปลี่ยนสไตล์ดังนี้:

Html เนื้อความ ( ระยะขอบ: 0; การขยาย: 0; ความสูง: 100%; ความสูงขั้นต่ำ: 100%; /* ความสูงควรเป็นทั้งหน้า */ ) .slider ( ความกว้าง: 100%; ล้น: ซ่อนไว้; ความสูง: 100 %; ความสูงขั้นต่ำ: 100%; /* ความสูงและความกว้างจนเต็ม */ ตำแหน่ง: สัมบูรณ์; /* ตำแหน่งสัมบูรณ์ */ ) .slider-wrapper (ความกว้าง: 100%; ความสูง: 100%; /* ความสูงและความกว้างถึง เต็ม */ ตำแหน่ง: สัมพันธ์; ) .slide ( float: ซ้าย; ตำแหน่ง: แน่นอน; ความกว้าง: 100%; ความสูง: 100%; ) .slide iframe ( จอแสดงผล: บล็อก; /* องค์ประกอบบล็อก */ ตำแหน่ง: แน่นอน; /* ตำแหน่งที่แน่นอน */ ความกว้าง: 100% ความสูง: 100%; /* ความสูงและความกว้างเต็ม */ )

สไลด์โชว์อัตโนมัติ สไลด์โชว์อัตโนมัติใช้ตัวจับเวลา แต่ละครั้งที่มีการเรียกฟังก์ชันตัวจับเวลา setInterval() กลับ เคอร์เซอร์จะเพิ่มขึ้น 1 และทำให้สไลด์ถัดไปจะถูกเลือก

เมื่อเคอร์เซอร์ถึงจำนวนสไลด์สูงสุด จะต้องรีเซ็ต

การแสดงภาพสไลด์ที่ไม่มีที่สิ้นสุดกลายเป็นเรื่องที่น่าเบื่อสำหรับผู้ใช้อย่างรวดเร็ว แนวทางปฏิบัติที่ดีที่สุดคือการหยุดภาพเคลื่อนไหวเมื่อผู้ใช้เลื่อนเมาส์ไปเหนือภาพเคลื่อนไหว และดำเนินการต่อเมื่อเคอร์เซอร์เลื่อนออกไป

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( สไลด์: ".slide", ความเร็ว: 3000, การค่อยๆ เปลี่ยน: "linear" ), options); var timer = null; // ตัวจับเวลา var index = 0; // เคอร์เซอร์ var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true) เคลื่อนไหว (( ความทึบ: 1 ), options.speed, options.easing) พี่น้อง (options.slides) css ("opacity", 0); ); var autoSlide = function(element) ( // เตรียมใช้งานตัวจับเวลาลำดับ = setInterval ( function() ( index++; // เพิ่มเคอร์เซอร์ 1 if(index == $(options.slides, element).length) ( index = 0; // รีเซ็ตเคอร์เซอร์ ) slideTo(index, element); ), options.speed ); // ช่วงเวลาเดียวกันกับใน method.animate() ); var startStop = function(element) ( element.hover(function() ( // หยุดภาพเคลื่อนไหว clearInterval(timer); timer = null; ), function () ( autoSlide(element); // ทำแอนิเมชั่นต่อ )); ); return this.each(function() ( var $element = $(this); สไลด์อัตโนมัติ($องค์ประกอบ); startStop($องค์ประกอบ); )); ); ))(เจเคอรี่);

พารามิเตอร์ทั้งสองของเมธอด .stop() ถูกตั้งค่าเป็นจริง เนื่องจาก เราไม่จำเป็นต้องสร้างคิวแอนิเมชันจากลำดับของเรา

ใน JS บริสุทธิ์ โค้ดจะง่ายขึ้น เราลงทะเบียนการเปลี่ยนแปลง CSS สำหรับแต่ละสไลด์ด้วยระยะเวลาที่แน่นอน:

สไลด์ ( การเปลี่ยนแปลง: ความทึบเชิงเส้น 3 วินาที; /* 3 วินาที = 3000 มิลลิวินาที */ )

และโค้ดจะเป็นดังนี้:

การนำทางด้วยแป้นพิมพ์ การแสดงภาพสไลด์ขั้นสูงนำเสนอการนำทางด้วยแป้นพิมพ์ เช่น เลื่อนดูสไลด์โดยกดปุ่ม สำหรับเรา นี่หมายความว่าเราจำเป็นต้องลงทะเบียนการจัดการเหตุการณ์การกดปุ่ม

เพื่อทำเช่นนี้ เราจะเข้าถึงคุณสมบัติ keyCode ของวัตถุเหตุการณ์ มันจะส่งคืนรหัสของปุ่มที่กด (รายการรหัส)

กิจกรรมเหล่านั้นที่เราแนบไปกับปุ่ม "ก่อนหน้า" และ "ถัดไป" สามารถแนบไปกับปุ่ม "ซ้าย" และ "ขวา" ได้แล้ว เจคิวรี:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // ลูกศรซ้าย $next.trigger("click"); ) if( รหัส == 37) ( // ลูกศรขวา $previous.trigger("click"); ) ));

ใน JS ล้วนๆ แทนที่จะใช้เมธอด .trigger() แบบธรรมดา คุณจะต้องใช้ DispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // คลิกเมาส์ if(code == 39) ( // ลูกศรซ้าย self .next.dispatchEvent(evt); ) if(code == 37) ( // ลูกศรขวา self.previous.dispatchEvent(evt); ) ), false);

ในโครงการที่ดีไม่ใช่เรื่องปกติที่จะทำเช่นนี้ เราจะต้องกำหนดฟังก์ชันที่ให้การพลิกในวิธีการสาธารณะ จากนั้นจึงเรียกมันเมื่อมีการคลิกปุ่ม ถ้าส่วนอื่นของโปรแกรมจำเป็นต้องใช้ฟังก์ชันนี้ ก็ไม่จำเป็นต้องจำลองเหตุการณ์ DOM แต่สามารถเรียกวิธีนี้ได้

การโทรกลับ คงจะดีถ้าสามารถแนบโค้ดบางส่วนกับการกระทำของสไลด์โชว์ที่จะดำเนินการเมื่อมีการดำเนินการนั้น นี่คือจุดประสงค์ของฟังก์ชันการโทรกลับ - จะดำเนินการเฉพาะเมื่อมีการกระทำบางอย่างเกิดขึ้นเท่านั้น สมมติว่าสไลด์โชว์ของเรามีคำบรรยายและซ่อนไว้ตามค่าเริ่มต้น ในช่วงเวลาของแอนิเมชัน เราต้องแสดงคำบรรยายสำหรับสไลด์ปัจจุบันหรือแม้แต่ทำอะไรบางอย่างกับสไลด์นั้น

ใน jQuery คุณสามารถสร้างการติดต่อกลับได้ดังนี้:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.animate(( opacity: 1 ), options.speed, options.easing, // โทรกลับสำหรับสไลด์ปัจจุบัน options.callback($ currentSlide)). พี่น้อง(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

ในกรณีนี้ การเรียกกลับเป็นฟังก์ชันจาก .animate() ที่ใช้สไลด์ปัจจุบันเป็นอาร์กิวเมนต์ นี่คือวิธีการใช้งาน:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // แสดงคำบรรยายปัจจุบันและซ่อนคำบรรยายอื่นๆ $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("ช้า"); ) )); ));

ใน JS บริสุทธิ์:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // callback ของเรา this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = นี้; var currentSlide = self.slides; currentSlide.style.opacity = 1; สำหรับ (var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

ฟังก์ชั่นการโทรกลับถูกกำหนดให้เป็นพารามิเตอร์ตัวที่สองของตัวสร้าง คุณสามารถใช้มันเช่นนี้:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // แสดงคำบรรยายภาพปัจจุบันและซ่อนคำบรรยายอื่นๆ var allSlides = wrapper.querySelectorAll(".slide"); var Caption = slide.querySelector(".slide-caption"); Caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

API ภายนอก จนถึงตอนนี้สถานการณ์การทำงานของเรานั้นเรียบง่าย: สไลด์ทั้งหมดอยู่ในเอกสารแล้ว หากเราต้องการแทรกข้อมูลจากภายนอก (YouTube, Vimeo, Flickr) เราจำเป็นต้องเติมสไลด์ทันทีเมื่อเราได้รับเนื้อหาภายนอก

เนื่องจากการตอบกลับจากเซิร์ฟเวอร์ของบริษัทอื่นอาจไม่เกิดขึ้นทันที คุณจึงต้องแทรกภาพเคลื่อนไหวในการโหลดเพื่อแสดงว่ากระบวนการกำลังดำเนินการอยู่:

ก่อนหน้าถัดไป

อาจเป็นภาพเคลื่อนไหว gif หรือ CSS ล้วนๆ:

#spinner ( รัศมีเส้นขอบ: 50%; เส้นขอบ: 2px solid #000; ความสูง: 80px; ความกว้าง: 80px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ระยะขอบ: -40px 0 0 -40px; ) # สปินเนอร์:หลัง ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; สีพื้นหลัง: #000; ด้านบน: 2px; ซ้าย: 48%; ความสูง: 38px; ความกว้าง: 2px; รัศมีเส้นขอบ: 5px; -webkit-transform-origin: 50% 97%; ต้นกำเนิดการแปลง: 50% 97%; -webkit-animation: เชิงมุม 1s เชิงเส้นไม่มีที่สิ้นสุด; ภาพเคลื่อนไหว: เชิงมุม 1s เชิงเส้นไม่มีที่สิ้นสุด; ) @-webkit-keyframes เชิงมุม ( 0%(-webkit-transform:rotate(0deg );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes เชิงมุม ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; สีพื้นหลัง: #000; ด้านบน: 6px; ซ้าย: 48%; ความสูง: 35px; ความกว้าง: 2px; รัศมีเส้นขอบ: 5px; -webkit-transform-origin: 50% 94% ; ต้นกำเนิดการแปลง: 50% 94%; -webkit-animation: ptangular 6s linear infinite; Animation: ptangular 6s linear infinite; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

ขั้นตอนจะเป็นดังนี้:
- ขอข้อมูลจากภายนอก
- ซ่อนโปรแกรมโหลดบูต
- แยกวิเคราะห์ข้อมูล
- สร้าง HTML
- แสดงภาพสไลด์โชว์
- ประมวลผลสไลด์โชว์

สมมติว่าเราเลือกวิดีโอล่าสุดของผู้ใช้จาก YouTube เจคิวรี:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... ตัวโหลด: "#spinner", //... จำกัด: 5, ชื่อผู้ใช้: "learncodeacademy" ), ตัวเลือก); //... var getVideos = function() ( // รับวิดีโอจาก YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // รับวิดีโอเป็นวัตถุ JSON $(options.loader) ซ่อน ( ); // การซ่อนตัวโหลด var items = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

ใน JavaScript ล้วนๆ มีขั้นตอนพิเศษคือการสร้างวิธีการรับ JSON:

จากนั้นขั้นตอนจะคล้ายกัน:

(function() ( ฟังก์ชั่นสไลด์โชว์(องค์ประกอบ) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON object callback(data); ) else ( console.log( request.status); ) ); ), //... getVideos: function() ( var self = this; // รับวิดีโอ YouTube var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // รับวิดีโอเป็นวัตถุ JSON var รายการ = videos.feed.entry ; var html = ""; self.loader.style.display = "ไม่มี"; // ซ่อนตัวโหลดสำหรับ (var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки

หากสไลด์มีเพียงรูปภาพ คุณสามารถเปลี่ยนโครงสร้างได้เล็กน้อย:

ก่อนหน้าถัดไป

อย่าลืมเพิ่มค่าที่มีความหมายให้กับแอตทริบิวต์ alt

หากต้องการใช้ลิงก์เพจ คุณสามารถทำสิ่งต่อไปนี้:

... ... ... 1 2 3

ก่อนหน้า ถัดไป 1 2 3

CSS เริ่มจากโครงสร้างต่อไปนี้:

ก่อนหน้าถัดไป

รูปแบบกระดาษห่อภายในประกอบด้วย:

สไลด์ ( ลอย: ซ้าย; ตำแหน่ง: สัมพันธ์; ความกว้าง: 1024px; ความสูง: 683px; )

เมื่อใช้ลิงก์เพจแทนปุ่ม คุณสามารถสร้างสไตล์ต่อไปนี้:

คลาสเหล่านี้จะได้รับการกำหนดแบบไดนามิกจากสคริปต์

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

ไม่มีวิธีการ .animate() ใน JS ปกติ ดังนั้นเราจึงใช้การเปลี่ยน CSS:

Slider-wrapper ( ตำแหน่ง: สัมพันธ์; // การเปลี่ยนแปลงที่จำเป็น: เหลือเส้นตรง 500ms; )

ตอนนี้คุณสามารถเปลี่ยนคุณสมบัติด้านซ้ายแบบไดนามิกผ่านวัตถุสไตล์:

และใน JS ล้วนๆ ดูเหมือนว่า:

ตั้งแต่ IE10 คุณสามารถจัดการคลาสผ่าน classList:

Link.classList.add("ปัจจุบัน");

และด้วย IE11 สามารถรับแอตทริบิวต์ข้อมูลได้ผ่านคุณสมบัติชุดข้อมูล:

ดัชนี Var = parseInt(a.dataset.slide, 10) + 1;

ใน jQuery โค้ดจะเป็นดังนี้:

.index() วิธีการให้ดัชนีตัวเลขของแต่ละลิงค์

การทำความเข้าใจเกี่ยวกับมิติข้อมูล กลับไปที่กฎ CSS ต่อไปนี้:

ใน jQuery มันง่าย:

ชุดสไตล์ต่อไปนี้สาธิตวิธีการนี้:

ใน JS ล้วนๆ คุณต้องลงทะเบียนการเปลี่ยนแปลง CSS ของแต่ละสไลด์:

ใน jQuery รหัสจะเป็นดังนี้:

ใน JavaScript มันจะเป็น:

หากต้องการสร้างสไลด์โชว์แบบเต็มหน้า คุณต้องเปลี่ยนสไตล์ดังนี้:

เมื่อเคอร์เซอร์ถึงจำนวนสไลด์สูงสุด จะต้องรีเซ็ต

สไลด์ ( การเปลี่ยนแปลง: ความทึบเชิงเส้น 3 วินาที; /* 3 วินาที = 3000 มิลลิวินาที */ )

และโค้ดจะเป็นดังนี้:

ใน JS ล้วนๆ แทนที่จะใช้เมธอด .trigger() แบบธรรมดา คุณจะต้องใช้ DispatchEvent():

ใน jQuery คุณสามารถสร้างการติดต่อกลับได้ดังนี้:

ใน JS บริสุทธิ์:

ก่อนหน้าถัดไป

อาจเป็นภาพเคลื่อนไหว gif หรือ CSS ล้วนๆ:

สมมติว่าเราเลือกวิดีโอล่าสุดของผู้ใช้จาก YouTube เจคิวรี:

ใน JavaScript ล้วนๆ มีขั้นตอนพิเศษคือการสร้างวิธีการรับ JSON:

จากนั้นขั้นตอนจะคล้ายกัน:

1. สไลด์โชว์ jQuery ที่ยอดเยี่ยม

สไลด์โชว์ขนาดใหญ่ที่น่าทึ่งโดยใช้เทคโนโลยี jQuery

2. ปลั๊กอิน jQuery “Scale Carousel”

สไลด์โชว์ที่ปรับขนาดได้โดยใช้ jQuery คุณสามารถกำหนดขนาดสไลด์โชว์ที่เหมาะกับคุณที่สุดได้

3. ปลั๊กอิน jQuery “slideJS”

แถบเลื่อนรูปภาพพร้อมคำอธิบายข้อความ

4. ปลั๊กอิน “JSliderNews” 5. ตัวเลื่อน CSS3 jQuery

เมื่อคุณโฮเวอร์เหนือลูกศรนำทาง รูปขนาดย่อแบบวงกลมของสไลด์ถัดไปจะปรากฏขึ้น

6. แถบเลื่อน jQuery “Presentation Cycle” ที่ดี

แถบเลื่อน jQuery พร้อมตัวบ่งชี้การโหลดรูปภาพ มีการเปลี่ยนสไลด์อัตโนมัติ

7. ปลั๊กอิน jQuery “ตัวเลื่อน Parallax”

ตัวเลื่อนพร้อมเอฟเฟกต์พื้นหลังเชิงปริมาตร จุดเด่นของแถบเลื่อนนี้คือการเคลื่อนไหวของพื้นหลังซึ่งประกอบด้วยหลายเลเยอร์ โดยแต่ละเลเยอร์จะเลื่อนด้วยความเร็วที่แตกต่างกัน ผลลัพธ์ที่ได้คือการเลียนแบบเอฟเฟกต์เชิงปริมาตร มันดูสวยงามมาก คุณสามารถเห็นได้ด้วยตัวเอง เอฟเฟกต์จะแสดงได้ราบรื่นยิ่งขึ้นในเบราว์เซอร์เช่น Opera, Google Chrome, IE

8. ตัวเลื่อน jQuery ที่สดใหม่และมีน้ำหนักเบา “bxSlider 3.0”

ในหน้าสาธิตในส่วน “ตัวอย่าง” คุณจะพบลิงก์ไปยังการใช้งานที่เป็นไปได้ทั้งหมดของปลั๊กอินนี้

9. ตัวเลื่อนรูปภาพ jQuery, ปลั๊กอิน “slideJS”

แถบเลื่อน jQuery ที่มีสไตล์สามารถตกแต่งโครงการของคุณได้อย่างแน่นอน

10. ปลั๊กอินสไลด์โชว์ jQuery “Easy Slides” v1.1

ปลั๊กอิน jQuery ที่ใช้งานง่ายสำหรับการสร้างสไลด์โชว์

11. ปลั๊กอิน jQuery Slidy

ปลั๊กอิน jQuery น้ำหนักเบาในเวอร์ชันต่างๆ มีการเปลี่ยนสไลด์อัตโนมัติ

12. แกลเลอรี jQuery CSS พร้อมการเปลี่ยนสไลด์อัตโนมัติ

หากผู้เข้าชมไม่คลิกที่ลูกศร "ไปข้างหน้า" หรือ "ย้อนกลับ" ภายในเวลาที่กำหนด แกลเลอรีจะเริ่มเลื่อนโดยอัตโนมัติ

13. แถบเลื่อน jQuery “Nivo Slider”

ปลั๊กอินคุณภาพสูงน้ำหนักเบาระดับมืออาชีพมากพร้อมโค้ดที่ถูกต้อง มีเอฟเฟ็กต์การเปลี่ยนสไลด์ที่แตกต่างกันมากมาย

14. แถบเลื่อน jQuery “MobilySlider”

สไลเดอร์สด. แถบเลื่อน jQuery พร้อมเอฟเฟกต์การเปลี่ยนรูปภาพต่างๆ

15. ปลั๊กอิน jQuery “Slider²”

สไลเดอร์น้ำหนักเบาพร้อมตัวเปลี่ยนสไลด์อัตโนมัติ

16. ตัวเลื่อนจาวาสคริปต์สด

แถบเลื่อนพร้อมการเปลี่ยนภาพอัตโนมัติ

ปลั๊กอินสำหรับการนำเสนอสไลด์พร้อมการเปลี่ยนสไลด์อัตโนมัติ สามารถควบคุมการแสดงผลโดยใช้ภาพขนาดย่อของรูปภาพได้

ตัวเลื่อนรูปภาพ jQuery CSS โดยใช้ปลั๊กอิน NivoSlider

19. แถบเลื่อน jQuery “jShowOff”

ปลั๊กอินสำหรับการหมุนเวียนเนื้อหา สามตัวเลือกสำหรับการใช้งาน: ไม่มีการนำทาง (พร้อมการเปลี่ยนรูปแบบการนำเสนอภาพนิ่งอัตโนมัติ) พร้อมการนำทางในรูปแบบของปุ่มพร้อมการนำทางในรูปแบบของภาพขนาดย่อ

20. ปลั๊กอิน “ผลงานชัตเตอร์เอฟเฟ็กต์”

ปลั๊กอิน jQuery ใหม่สำหรับการออกแบบผลงานของช่างภาพ แกลเลอรีมีเอฟเฟกต์ที่น่าสนใจในการเปลี่ยนรูปภาพ ภาพถ่ายจะติดตามกันโดยมีเอฟเฟกต์คล้ายกับการทำงานของชัตเตอร์เลนส์

21. ตัวเลื่อน CSS javascript น้ำหนักเบา “TinySlider 2”

การใช้งานแถบเลื่อนรูปภาพโดยใช้ javascript และ CSS

22. สไลเดอร์สุดเจ๋ง “Tinycircleslider”

แถบเลื่อนทรงกลมมีสไตล์ การเปลี่ยนระหว่างรูปภาพทำได้โดยการลากแถบเลื่อนในรูปแบบของวงกลมสีแดงรอบเส้นรอบวง มันจะเข้ากันได้อย่างลงตัวกับเว็บไซต์ของคุณหากคุณใช้องค์ประกอบทรงกลมในการออกแบบของคุณ

23. ตัวเลื่อนรูปภาพด้วย jQuery

สไลเดอร์น้ำหนักเบา “Slider Kit”. แถบเลื่อนมีให้เลือกหลายแบบทั้งแนวตั้งและแนวนอน มีการนำการนำทางประเภทต่าง ๆ ระหว่างรูปภาพไปใช้: ใช้ปุ่ม "ไปข้างหน้า" และ "ย้อนกลับ" โดยใช้ล้อเลื่อนของเมาส์โดยใช้การคลิกเมาส์บนสไลด์

24. แกลเลอรีพร้อมภาพย่อ “Slider Kit”

แกลเลอรี่ "ชุดสไลเดอร์" การเลื่อนภาพขนาดย่อทำได้ทั้งแนวตั้งและแนวนอน การเปลี่ยนระหว่างรูปภาพทำได้โดยใช้: ล้อเลื่อนของเมาส์ การคลิกเมาส์ หรือการวางเคอร์เซอร์ไว้เหนือภาพขนาดย่อ

25. ตัวเลื่อนเนื้อหา jQuery “Slider Kit”

แถบเลื่อนเนื้อหาแนวตั้งและแนวนอนโดยใช้ jQuery

26. สไลด์โชว์ jQuery “ชุดตัวเลื่อน”

สไลด์โชว์พร้อมการเปลี่ยนสไลด์อัตโนมัติ

27. ตัวเลื่อน CSS3 จาวาสคริปต์ระดับมืออาชีพน้ำหนักเบา

แถบเลื่อน jQuery และ CSS3 ที่ประณีตสร้างขึ้นในปี 2011

สไลด์โชว์ jQuery พร้อมภาพขนาดย่อ

29. สไลด์โชว์ jQuery อย่างง่าย

สไลด์โชว์พร้อมปุ่มนำทาง

30. สไลด์โชว์ jQuery “Skitter” ที่ยอดเยี่ยม

ปลั๊กอิน jQuery Skitter สำหรับสร้างสไลด์โชว์ที่น่าทึ่ง ปลั๊กอินรองรับเอฟเฟกต์ภาพเคลื่อนไหวที่แตกต่างกัน 22 (!) ประเภทเมื่อเปลี่ยนรูปภาพ สามารถทำงานร่วมกับตัวเลือกการนำทางสไลด์ได้สองแบบ: การใช้หมายเลขสไลด์และการใช้ภาพขนาดย่อ อย่าลืมชมการสาธิตซึ่งเป็นการค้นหาคุณภาพสูงมาก เทคโนโลยีที่ใช้: CSS, HTML, jQuery, PHP

31. สไลด์โชว์ “อึดอัด”

สไลด์โชว์ฟังก์ชั่น สไลด์อาจเป็น: รูปภาพธรรมดา รูปภาพพร้อมคำบรรยาย รูปภาพพร้อมคำแนะนำเครื่องมือ วิดีโอ คุณสามารถใช้ลูกศร ลิงก์หมายเลขสไลด์ และปุ่มซ้าย/ขวาบนแป้นพิมพ์เพื่อนำทาง การนำเสนอภาพนิ่งมีหลายเวอร์ชัน: มีและไม่มีภาพขนาดย่อ หากต้องการดูตัวเลือกทั้งหมด โปรดไปที่ลิงก์ การสาธิต #1 - การสาธิต #6 ซึ่งอยู่ที่ด้านบนของหน้าสาธิต

การออกแบบแถบเลื่อนรูปภาพแบบดั้งเดิมที่ชวนให้นึกถึงพัด การเปลี่ยนสไลด์แบบเคลื่อนไหว การนำทางระหว่างรูปภาพทำได้โดยใช้ลูกศร นอกจากนี้ยังมีปุ่ม Shift อัตโนมัติที่สามารถเปิดและปิดได้โดยใช้ปุ่มเล่น/หยุดชั่วคราวที่อยู่ด้านบน

แถบเลื่อน jQuery แบบเคลื่อนไหว ภาพพื้นหลังจะปรับขนาดโดยอัตโนมัติเมื่อมีการปรับขนาดหน้าต่างเบราว์เซอร์ สำหรับแต่ละภาพ บล็อกที่มีคำอธิบายจะปรากฏขึ้น

34. แถบเลื่อน “Flux Slider” โดยใช้ jQuery และ CSS3

ตัวเลื่อน jQuery ใหม่ เอฟเฟกต์ภาพเคลื่อนไหวสุดเจ๋งมากมายเมื่อเปลี่ยนสไลด์

35. ปลั๊กอิน jQuery “jSwitch”

แกลเลอรี่ jQuery เคลื่อนไหว

สไลด์โชว์ jQuery ง่าย ๆ พร้อมการเปลี่ยนสไลด์อัตโนมัติ

37. ปลั๊กอินเวอร์ชันใหม่ “SlideDeck 1.2.2”

แถบเลื่อนเนื้อหาระดับมืออาชีพ มีตัวเลือกที่เปลี่ยนสไลด์อัตโนมัติ รวมถึงตัวเลือกที่ใช้ล้อเลื่อนของเมาส์เพื่อเลื่อนไปมาระหว่างสไลด์

38. แถบเลื่อน jQuery “Sudo Slider”

แถบเลื่อนรูปภาพน้ำหนักเบาโดยใช้ jQuery มีตัวเลือกการใช้งานมากมาย: การเปลี่ยนรูปภาพในแนวนอนและแนวตั้ง โดยมีและไม่มีลิงก์ไปยังหมายเลขสไลด์ มีและไม่มีคำอธิบายภาพ เอฟเฟกต์การเปลี่ยนรูปภาพต่างๆ มีฟังก์ชั่นเปลี่ยนสไลด์อัตโนมัติ สามารถดูลิงก์ไปยังตัวอย่างการใช้งานทั้งหมดได้ในหน้าสาธิต

39. สไลด์โชว์ jQuery CSS3

สไลด์โชว์พร้อมรูปขนาดย่อรองรับโหมดเปลี่ยนสไลด์อัตโนมัติ

40. ตัวเลื่อน jQuery “Flux Slider”

สไลเดอร์พร้อมเอฟเฟกต์การเปลี่ยนภาพมากมาย

41. ตัวเลื่อน jQuery อย่างง่าย

แถบเลื่อนรูปภาพที่มีสไตล์โดยใช้ jQuery

สวัสดีทุกคน. Corvax อยู่กับคุณ วันนี้ฉันจะแสดงให้คุณเห็นว่าการสร้างแถบเลื่อนแกลเลอรี่ภาพนกฮูกโดยใช้ JavaScript ล้วนๆ นั้นง่ายดายเพียงใด มาเริ่มกันเลย.

ก่อนอื่นเราจะต้องสร้างโครงสร้างโครงการ นี่คือตัวอย่าง:

เค้าโครง HTML

ในไฟล์ index.html คุณต้องสร้างโครงสร้างต่อไปนี้

CSS Styles #gallery( width: 400px; text-align: center; margin: 0 auto; ) .photo( ตำแหน่ง: สัมพันธ์; ความสูง: 300px; ) .photo img( width: 100%; ตำแหน่ง: สัมบูรณ์; ความทึบ: 0; ซ้าย: 0; การเปลี่ยนแปลง: ความทึบ 1s; ) .photo img.shown( ความทึบ: 1; ) .tabs( text-align: center; padding-top: 20px; )

ประเด็นหลักที่ควรค่าแก่การใส่ใจที่นี่คือเราทำให้ภาพทั้งหมดโปร่งใสตามค่าเริ่มต้น (ความทึบ: 0) และในคลาสที่แสดง เราได้เพิ่มคุณสมบัติความทึบ: 1.

เพิ่ม JS var btn_prev = document.querySelector(".tabs .prev"), btn_next = document.querySelector(".tabs .next"); var image = document.querySelectorAll(".photo img"); วาร์ i = 0; btn_prev.onclick = function())( รูปภาพ[i].className = ""; i = i - 1; if(i = images.length)( i = 0; ) รูปภาพ[i].className = "แสดง"; ) ;

นี่คือส่วนที่น่าสนใจที่สุด ขั้นแรก เราเริ่มต้นปุ่มสองปุ่มซึ่งเราจะแนบเหตุการณ์การคลิกและชุดรูปภาพ (btn_prev, btn_next, รูปภาพ) หลังจากเริ่มต้นแล้ว เราจะโยนเหตุการณ์ onclick บนปุ่มที่จะเลื่อนไปตามแถบเลื่อนของเรา

รูปภาพ[i].className = ""; ที่นี่เราจะลบคลาสที่แสดงออกจากรูปภาพทั้งหมดโดยคลิก

i ++ (—) ที่นี่เราจะเปลี่ยนตัวระบุสไลด์ทุกครั้งที่คลิก

if(i > = images.length)( i = 0; ) (เงื่อนไขสำหรับการคลิกที่ปุ่ม "ไปข้างหน้า") เราต้องใช้เงื่อนไขนี้เพื่อตรวจสอบเมื่อเลือกสไลด์สุดท้าย หากเราเลือกสไลด์ที่มีขนาดใหญ่กว่าสไลด์สุดท้าย เราจะกำหนด 0 ให้กับตัวบ่งชี้ (ซึ่งจะทำให้เราอยู่ที่จุดเริ่มต้นของชุดโดยอัตโนมัติ)

ถ้าฉัน< 0){ i = images.length — 1; } (условие по клику на кнопку «назад») здесь если индификатор картники меньше 0 то индификатор будет равен последнему слайду -1 (т.к. массив у нас начинается с 0)

รูปภาพ[i].className = "แสดง"; ที่นี่เราจะเพิ่มคลาสที่แสดงให้กับสไลด์ที่ใช้งานอยู่ในปัจจุบัน

บทสรุป

วันนี้เราสร้างแถบเลื่อนของเราเองโดยใช้ JS ดั้งเดิม คุณสามารถรับซอร์สโค้ดได้ Corvax อยู่กับคุณ ขอให้โชคดีกับการพัฒนาของคุณ!