ทุกคนคุ้นเคยกับเว็บไซต์ HAO123 ฉันไม่จำเป็นต้องพูดเพิ่มเติมเกี่ยวกับเอฟเฟกต์เฉพาะ เพื่อนที่สนใจสามารถอ้างถึงการเรนเดอร์ ตัวแก้ไขต่อไปนี้จะแบ่งปันแนวคิดในการใช้รหัส แน่นอนคุณสามารถเพิ่มแก้ไขและลบรหัสได้อย่างเหมาะสมตามความต้องการของคุณ
รหัสคีย์มีดังนี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> picture carousel </title> <style> .warp {width: 600px; ความสูง: 750px; ตำแหน่ง: ญาติ; Absolute; Top: 0px; ซ้าย: 0px; Overflow: Hidden;/*Overflow-x: auto;*/}#box #con {width: 6000px; ความสูง: 750px; overflow: hidden;}#con img {float: ซ้าย; 366px; ความกว้าง: 36px; ความสูง: 36px; พื้นหลัง: url (รูปภาพ/btnl.png) 0 0 ไม่ซ้ำ; เคอร์เซอร์: ตัวชี้;}#btnr {ตำแหน่ง: สัมบูรณ์; ขวา: 0px; top: 366px; 36px; ความสูง: 36px; pointer;}#num {ตำแหน่ง: Absolute; Bottom: 10px; ซ้าย: 148px; Overflow: Hidden; list-style: none;}#num li {float: left; margin: 0 5px; font-size: 16px; line-height: 25px; li.select {พื้นหลังสี: สีเขียว; สี: สีขาว;} </style> </head> <body> <div> <div id = "box"> <div id = "con"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2.jpg"> src = "images/meinv4.jpg"> <img src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> <div id = "btnl"> </div> <div id = "btnr" id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <li> imgs = con.getElementsByTagname ('img'); var btnl = document.getElementById ('btnl'); var btnr = document.getElementById ('btnr'); var num = document.getElementById ( imgw = imgs [0] .clientWidth; var x = 0; ฟังก์ชัน imgscroll () {// สวิตช์ภาพ var start = box.scrollleft; var end = imgw*x; var เปลี่ยน = end-start; var minstep = 0; steplength = change/maxstep; clearinterval (timer2); timer2 = setInterval (ฟังก์ชัน () {minstep ++; // console.log (minstep); ถ้า (minstep> = maxstep) {clearinterval (timer2); i ++) {lis [i] .className = 'none';} lis [x] .className = 'select';} ฟังก์ชั่นย้าย () {// การเลื่อนเริ่มต้นไปทางซ้ายทุก 3 วินาที clearInterval (timer1); timer1 = setInterval = 0; i <lis.length; btnr.onclick = function () {clearinterval (timer1); x ++; ถ้า (x> = imgs.length) {x = 0;} imgscroll (); move ();} btnl.onclick = function () {clearinterval (timer1); x-; {x = imgs.length-1;} imgscroll (); move ();} สำหรับ (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll ()ด้านบนเป็นเอฟเฟกต์ม้าหมุนภาพของหน้าการนำทาง JS Imitation HAO123 ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!