ในบทความนี้ ฉันจะแสดงวิธีสร้างแถบเลื่อนที่เลื่อนโดยอัตโนมัติ รวมถึงปุ่มถัดไปและก่อนหน้าโดยใช้โค้ด HTML CSS และ JavaScript
ในการแสดงภาพสไลด์ใน javascript จะมีช่วงระยะเวลาหนึ่งที่เนื้อหาจะถูกแทนที่ ไม่ว่าจะเป็นรูปภาพหรือวิดีโอ ผู้ใช้สามารถย้ายปุ่มไปยังปุ่มถัดไปได้โดยคลิกที่ปุ่มเหล่านั้น
แถบเลื่อนประเภทนี้ใช้ในเว็บไซต์เพื่อจัดเก็บรูปภาพหลายประเภทไว้ด้วยกันเพื่อแสดงเป็นแกลเลอรี แถบเลื่อนนี้ทำงานโดยอัตโนมัติและสามารถควบคุมได้ด้วยตนเอง
ตอนนี้ เราเริ่ม แถบเลื่อนรูปภาพอัตโนมัติใน html css javascript คุณยังสามารถเรียกสิ่งนี้ว่าแถบเลื่อนแกลเลอรี js
แถบเลื่อนรูปภาพ JavaScript นั้นง่ายต่อการเขียนโค้ด แต่คุณต้องเข้าใจเหตุผลเบื้องหลัง ดังนั้น คุณจึงสามารถออกแบบสไลด์โชว์อัตโนมัติ html css js ประเภทใดก็ได้ได้อย่างง่ายดาย
ขั้นตอนที่ 1: สร้างโค้ด HTML
- สร้างไฟล์ .html
- สร้างไฟล์ .js
- สร้างไฟล์ .css
- สร้างโฟลเดอร์สำหรับรูปภาพของคุณ
และวางไฟล์ทั้งหมดนี้ไว้ในโฟลเดอร์
ฉันใช้ โค้ด Visual Studio คุณสามารถใช้โปรแกรมแก้ไขโค้ดใดก็ได้
เชื่อมโยงไฟล์ .css และไฟล์ .js เข้ากับไฟล์ html ของคุณ
ตอนนี้เราเพิ่มภาพของเรา ตั้งชื่อ div แล้วตั้งชื่อคลาสว่า "main" จากนั้นแยก div ภายในสำหรับแต่ละภาพและกำหนดคลาส "สไลด์" ให้กับพวกเขา มันจะช่วยเราในการเขียนโค้ดและจัดแต่งทรงผมในภายหลัง
เราจำเป็นต้องมีปุ่มสองปุ่มเพื่อควบคุมแถบเลื่อนนี้ด้วยตนเอง ดังนั้น ให้สร้างปุ่มสองปุ่มภายใน div หลักเดียวกันโดยใช้ ‹Span› มอบคลาส "ลูกศร" ให้พวกเขาเพื่อจัดแต่งทรงผมและกำหนดรหัสเป็น "ก่อนหน้า" และ "ถัดไป" ฉันได้เพิ่มลูกศร HTML ที่กำหนดไว้ล่วงหน้าแล้ว คุณสามารถดาวน์โหลดได้จาก toptal.com ฉันได้มอบหมายให้พวกเขา onclick fnctions ซึ่งเราจะหารือเพิ่มเติมใน Javascript ของเรา
ขั้นตอนที่ 2: การจัดสไตล์ CSS
ก่อนอื่นเรากำหนดสไตล์ div หลักของเรา กำหนดความกว้างสูงสุด 70% ความสูง 500px ระยะขอบจากบนและล่าง 100px และอัตโนมัติจากขวาและซ้ายเพื่อให้อยู่ตรงกลาง ให้ Box-sahdow grey และกำหนดตำแหน่ง div หลักนี้ว่า "relative"
ตอนนี้เราจัดรูปแบบลูกศรถัดไปและก่อนหน้าของเรา กำหนดตำแหน่งให้พวกเขาเป็น "สัมบูรณ์" และ 45% บนสุดเพื่อเลื่อนลูกศรนี้ขึ้นบนแถบเลื่อน และเลื่อนลูกศรขวาไปทางด้านขวาของแถบเลื่อน
ขั้นตอนที่ 3: รหัส Javascript สำหรับแถบเลื่อนรูปภาพ
ก่อนอื่น เราต้องเข้าใจจำนวนรูปภาพและหมายเลขดัชนีของรูปภาพก่อน
สร้างตัวแปร “slideno” และกำหนดค่าให้เป็น “0” และสร้างฟังก์ชันสไลด์โชว์ ( ) และส่งค่า "slideno" ไปยังฟังก์ชันนี้
อย่างที่คุณเห็นตามค่าเริ่มต้นรูปภาพทั้งหมดจะแสดงบนหน้าจอของคุณ เราจำเป็นต้องซ่อนพวกมันตามค่าเริ่มต้น และทำให้สไลด์[0] มองเห็นได้ตามค่าเริ่มต้น
ใช้ "num" เพื่อรับค่า "slideno" ในฟังก์ชัน เนื่องจากเราได้ให้คลาส "สไลด์" แก่สไลด์ทั้งหมดแล้วในโค้ด html ของเรา ทำให้การแสดงไม่มีสำหรับสไลด์ทั้งหมด จากนั้นสร้างบล็อกการแสดงสไลด์[0] ตามค่าเริ่มต้นในการเริ่มต้น
สร้างฟังก์ชั่นสำหรับปุ่มก่อนหน้าและถัดไป
ตอนนี้เราต้องเลื่อนกลับไปที่ '0' เมื่อเลื่อนไปจนสุดสไลด์แล้วเลื่อนสไลด์ไปข้างหลังด้วยปุ่มก่อนหน้า เพิ่มโค้ดนี้ลงในฟังก์ชันสไลด์โชว์ของคุณ ( )
ตอนนี้แถบเลื่อนทำงานได้ดีด้วยตนเองด้วยปุ่มถัดไปและก่อนหน้า ตอนนี้เราต้องทำให้มันเลื่อนโดยอัตโนมัติ
แถบเลื่อนรูปภาพในซอร์สโค้ดจาวาสคริปต์
เพียงคัดลอกและวางโค้ดนี้
<ร่างกาย>
‹คลาส div=”main”›
‹คลาส div=”สไลด์”›
‹img src=”รูปภาพ/image1.jpg” alt=””›
‹/div›
‹คลาส div=”สไลด์”›
‹img src=”รูปภาพ/image2.jpg” alt=””›
‹/div›
‹คลาส div=”สไลด์”›
‹img src=”รูปภาพ/image3.jpg” alt=””›
‹/div›
‹คลาส div=”สไลด์”›
‹img src=”รูปภาพ/image4.jpg” alt=””›
‹/div›
‹คลาส div=”สไลด์”›
‹img src=”รูปภาพ/image5.jpg” alt=””›
‹/div›
‹คลาส div=”สไลด์”›
‹img src=”รูปภาพ/image6.jpg” alt=””›
‹/div›
‹span class=”arrow” id=”prev” onclick=”controller(-1)”›❮‹/span›
‹span class=”arrow” id=”next” onclick=”controller(+1)”›❯‹/span›
‹/div›
← — — — -โค้ด CSS — — — — →
*{
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
ขนาดกล่อง: เส้นขอบกล่อง;
}
.หลัก{
ความกว้างสูงสุด: 70%;
ความสูง: 500px;
ระยะขอบ: 100px อัตโนมัติ;
กล่องเงา: 0px 0px 30px สีเทา;
ตำแหน่ง: ญาติ;
}
.ลูกศร{
เคอร์เซอร์: ตัวชี้;
ตำแหน่ง: แน่นอน;
ด้านบน: 45%;
สี: สีแดง;
สีพื้นหลัง: สีขาว;
การขยาย: 8px 18px;
ขนาดตัวอักษร: 25px;
น้ำหนักตัวอักษร: ตัวหนา;
}
#ต่อไป{
ขวา: -55px;
}
← — — — — — — — -รหัส js — — — — — — — -›
/*รูปภาพ 6 ( ดัชนี: 0 1 2 3 4 5 )
ความยาว =6 */
ให้สไลด์โน = 0;
/* ปุ่มก่อนหน้าและถัดไป*/
ตัวควบคุมฟังก์ชัน (x) {
สไลด์โน = สไลด์โน + x;
สไลด์โชว์(สไลด์โน);
}
สไลด์โชว์(สไลด์โน);
/* สไลด์อัตโนมัติ */
setInterval (อัตโนมัติ, 2000);
ตัวนับ var = 0;
ฟังก์ชั่นอัตโนมัติ() {
var autoslides = document.getElementsByClassName(“สไลด์”);
สำหรับ (เลื่อนอัตโนมัติทั้งหมด) {
all.style.display = “ไม่มี”;
}
autoslides[เคาน์เตอร์].style.display = “บล็อก”;
เคาน์เตอร์++;
ถ้า (ตัวนับ == autoslides.length) {
ตัวนับ = 0;
}
}
/* ฟังก์ชั่นสไลด์โชว์*/
ฟังก์ชั่นสไลด์โชว์ (หมายเลข) {
สไลด์ var = document.getElementsByClassName("สไลด์");
/*เลื่อนสไลด์กลับไปที่ '0' เมื่อเลื่อนไปจนสุดสไลด์*/
ถ้า (num == สไลด์ความยาว) {
สไลด์โน = 0;
หมายเลข = 0;
}
/*เลื่อนสไลด์ไปข้างหลังด้วยปุ่มก่อนหน้า*/
ถ้า (หมายเลข ‹ 0) {
slideno = สไลด์ความยาว — 1;
num = สไลด์ความยาว — 1;
}
/* Bydefault ทำให้สไลด์ทั้งหมดไม่แสดงผลเลย*/
สำหรับ (หลากหลายสไลด์ทั้งหมด) {
all.style.display = “ไม่มี”;
}
/* แสดงภาพที่ [0] โดยdeafulat*/
/*จะแสดงสไลด์ที่มีค่าเป็นตัวแปร “num”*/
สไลด์[num].style.display = “บล็อก”;
}
เผยแพร่ครั้งแรกที่ https://www.freetipsandtrick.com เมื่อวันที่ 3 ธันวาคม 2022
