วิธีสร้างสไลด์โชว์ JavaScript ใน 3 ขั้นตอนง่ายๆ

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

วันนี้ผมจะแสดงวิธีการสร้างสไลด์โชว์ JavaScript ตั้งแต่เริ่มต้น กระโดดเข้าไปเลย!

ข้อกำหนดเบื้องต้น

คุณจะต้องรู้บางสิ่งก่อนจึงจะเริ่มเขียนโค้ดได้ ควบคู่ไปกับเว็บเบราว์เซอร์ที่เหมาะสมและโปรแกรมแก้ไขข้อความที่คุณเลือก (ฉันแนะนำ ข้อความประเสริฐ ) คุณจะต้องมีประสบการณ์กับ HTML , CSS , JavaScript , และ jQuery .

หากคุณไม่มั่นใจในทักษะของคุณ โปรดอ่านคู่มือการใช้ Document Object Model และเคล็ดลับเหล่านี้เพื่อเรียนรู้ CSS หากคุณมั่นใจใน JavaScript แต่ไม่เคยใช้ jQuery มาก่อน ลองดูคู่มือพื้นฐานของเราเกี่ยวกับ jQuery

1. การเริ่มต้น

สไลด์โชว์นี้ต้องใช้คุณสมบัติหลายประการ:

รองรับภาพ
การควบคุมสำหรับการเปลี่ยนภาพ
คำบรรยายข้อความ
โหมดอัตโนมัติ

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

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

นี่คือ HTML เริ่มต้นที่คุณต้องเริ่มต้น บันทึกไว้ในไฟล์ที่มีชื่อที่เหมาะสม เช่น index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

นี่คือลักษณะของรหัส:

มันค่อนข้างขยะใช่มั้ย? มาทำลายมันก่อนที่เราจะปรับปรุงมัน

รหัสนี้มี 'มาตรฐาน' HTML , ศีรษะ , สไตล์ , สคริปต์ , และ ร่างกาย แท็ก ส่วนเหล่านี้เป็นส่วนประกอบสำคัญของเว็บไซต์ใดๆ JQuery รวมอยู่ใน Google CDN -- จนถึงขณะนี้ยังไม่มีอะไรพิเศษหรือพิเศษใดๆ

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

คลาสพาเรนต์ถูกกำหนดด้วยชื่อคลาสของ ภาพคอนเทนเนอร์ :

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

ในขั้นตอนสุดท้าย รูปภาพจะถูกอ้างอิง และคำบรรยายจะถูกเก็บไว้ใน div ด้วย the แคปชั่น ระดับ:

Dog

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

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

ในที่สุด ปุ่มนำทางจะถูกสร้างขึ้น สิ่งเหล่านี้ทำให้ผู้ใช้สามารถเลื่อนดูรูปภาพได้:

 ❮  
 ❯

เหล่านี้ เอนทิตี HTML รหัสจะใช้เพื่อแสดงลูกศรไปข้างหน้าและข้างหลัง ในลักษณะเดียวกับการทำงานของแบบอักษรของไอคอน

2. CSS

เมื่อโครงสร้างหลักเข้าที่แล้ว ก็ถึงเวลาทำให้ดู สวย . นี่คือลักษณะหลังจากโค้ดใหม่นี้:

เพิ่ม CSS นี้ระหว่าง your สไตล์ แท็ก:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

ที่ดูดีขึ้นมากตอนนี้ใช่มั้ย? มาดูโค้ดกันเลย

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

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

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

คุณสามารถดูผลลัพธ์ของรหัสนี้ส่วนใหญ่ได้ในปุ่มต่างๆ:

ส่วนที่ซับซ้อนที่สุดคือเส้นที่ดูแปลก ๆ นี้:

.imageContainer:not(:first-child) {

มันอาจจะดูไม่ปกตินัก แต่ก็อธิบายได้ค่อนข้างดี

อย่างแรก มันกำหนดเป้าหมายองค์ประกอบใด ๆ ที่มี ภาพคอนเทนเนอร์ ระดับ. NS :ไม่() ไวยากรณ์ระบุว่าองค์ประกอบใด ๆ ในวงเล็บควรเป็น ไม่รวม จากสไตล์นี้ ในที่สุด :ลูกคนแรก ไวยากรณ์ระบุว่า CSS นี้ควรกำหนดเป้าหมายองค์ประกอบใดๆ ที่ตรงกับชื่อ แต่ ละเว้นองค์ประกอบแรก เหตุผลนี้ง่าย เนื่องจากเป็นสไลด์โชว์ จึงต้องใช้เพียงภาพเดียวในแต่ละครั้ง CSS นี้ซ่อนรูปภาพทั้งหมดยกเว้นรูปภาพแรก

3. JavaScript

จิ๊กซอว์ชิ้นสุดท้ายคือจาวาสคริปต์ นี่คือเหตุผลในการทำให้สไลด์โชว์ทำงานได้อย่างถูกต้อง

เพิ่มรหัสนี้ใน .ของคุณ สคริปต์ แท็ก:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

มันอาจจะดูขัดกับสัญชาตญาณ แต่ฉันจะข้ามช่วงเริ่มต้นของโค้ด และข้ามไปที่การอธิบายโค้ดตั้งแต่ครึ่งทาง ไม่ต้องกังวลไป ฉันอธิบายโค้ดทั้งหมดแล้ว!

คุณต้องกำหนดสองตัวแปร (นี่คือวิธีการกำหนดตัวแปรใน JavaScript ) ตัวแปรเหล่านี้ถือได้ว่าเป็นตัวแปรการกำหนดค่าหลักสำหรับสไลด์โชว์:

var currentImage = 1;  
var totalImages = 3;

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

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

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

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

ความก้าวหน้าอัตโนมัติ

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

คุณสามารถใช้เครดิต paypal กับร้านค้าใดได้บ้าง

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

นี่คือ JavaScript ใหม่ที่คุณต้องการ -- เพิ่มสิ่งนี้หลังจาก ลดภาพ การทำงาน:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

ไม่มีอะไรเกิดขึ้นมากมายที่นี่ NS window.setInterval เมธอดจะรันโค้ดเป็นประจำตามที่กำหนดโดยเวลาที่ระบุไว้ในตอนท้าย เวลา 2500 (หน่วยเป็นมิลลิวินาที) หมายความว่าสไลด์โชว์นี้จะเลื่อนไปข้างหน้าทุกๆ 2.5 วินาที ตัวเลขที่น้อยกว่าหมายความว่าแต่ละภาพจะก้าวหน้าเร็วขึ้น NS คลิก วิธีการเรียกปุ่มเพื่อเรียกใช้รหัสราวกับว่าผู้ใช้คลิกปุ่มด้วยเมาส์

หากคุณพร้อมสำหรับความท้าทายด้าน JavaScript ครั้งต่อไป ให้ลองสร้างเว็บไซต์ด้วยเครื่องมือสร้างเว็บไซต์แบบสแตติก เช่น GatsbyJS หรือเฟรมเวิร์กส่วนหน้าอย่าง Vue หากคุณเป็นผู้เรียน Ruby Jekyll ก็เป็นตัวเลือกเช่นกัน นี่คือวิธีที่ Jekyll และ GatsbyJS แข่งขันกัน

เครดิตภาพ: ธรณัฏฐ์ สารศรี ผ่าน Shutterstock.com

แบ่งปัน แบ่งปัน ทวีต อีเมล 8 เว็บไซต์ที่ดีที่สุดในการดาวน์โหลดหนังสือเสียงฟรี

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

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

การเขียนโปรแกรม
JavaScript
ออกแบบเว็บ

เกี่ยวกับผู้เขียน โจ โคเบิร์น(ตีพิมพ์บทความ 136 บทความ)

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

เพิ่มเติมจาก Joe Coburn

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก