บทความนี้แบ่งปันรหัสเฉพาะสำหรับการใช้ JS เพื่อสร้างเอฟเฟกต์ม้าหมุนในหน้าแรกของเว็บไซต์ทั่วไปสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> picture carousel </title> <style> .warp {width: 600px; ความสูง: 750px; ตำแหน่ง: ญาติ; มาร์จิ้น: 30px auto 0; ล้น: ซ่อน; } #Box {WIDTH: 600PX; ความสูง: 750px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; ล้น: ซ่อน; /*overflow-x: auto;*/} #box #con {width: 6000px; ความสูง: 750px; ล้น: ซ่อน; } #con img {float: ซ้าย; ความกว้าง: 600px; ความสูง: 750px; } #btnl {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 366px; ความกว้าง: 36px; ความสูง: 36px; ความเป็นมา: URL (รูปภาพ/btnl.png) 0 0 ไม่ซ้ำ; เคอร์เซอร์: ตัวชี้; } #btnr {ตำแหน่ง: สัมบูรณ์; ขวา: 0px; ด้านบน: 366px; ความกว้าง: 36px; ความสูง: 36px; ความเป็นมา: URL (รูปภาพ/btnr.png) 0 0 ไม่ซ้ำ; เคอร์เซอร์: ตัวชี้; } #num {ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 10px; ซ้าย: 148px; ล้น: ซ่อน; รายการสไตล์: ไม่มี; } #num li {float: ซ้าย; มาร์จิ้น: 0 5px; ขนาดตัวอักษร: 16px; ความสูงของสาย: 25px; ความสูง: 25px; ความกว้าง: 25px; ความเป็นมา: #CCC; TEXT-ALIGN: CENTER; เคอร์เซอร์: ตัวชี้; } #num li.select {พื้นหลังสี: สีเขียว; สี: สีขาว; } </style> </head> <body> <div> <div id = "box"> <div id = "con"> <img src = "images/meinv1.jpg"> <img src = "รูปภาพ/meinv2.jpg"> src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> </div> <div id = "btnl"> </div> <div id = "btnr"> </div> <li> 5 </li> <li> 6 </li> </div> </script> var box = document.getElementById ('box'); var con = document.getElementById ('con'); var imgs = con.getElementsByTagname ('img'); var btnl = document.getElementById ('btnl'); var btnr = document.getElementById ('btnr'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var btnr = document.getElementById ('num'); var num = document.getElementById ('num'); var num = document.getElementById ('num'); var lis = num.getElementsByTagname ('li'); var timer1 = null, timer2 = null; var imgw = imgs [0] .clientwidth; var x = 0; ฟังก์ชั่น imgscroll () {// สวิตช์ภาพ var start = box.scrollleft; var end = imgw*x; var change = end-start; var minstep = 0; var maxstep = 30; var steplength = change/maxstep; ClearInterval (Timer2); timer2 = setInterval (function () {minstep ++; // console.log (minstep); ถ้า (minstep> = maxstep) {clearinterval (timer2);} start+= steplength; box.scrollleft = start;}, 20) สำหรับ (var i = 0; } lis [x] .className = 'เลือก'; } ฟังก์ชั่นย้าย () {// การเลื่อนเริ่มต้นไปทางซ้ายทุก ๆ 3 วินาที ClearInterval (Timer1); timer1 = setInterval (ฟังก์ชัน () {x ++; ถ้า (x> = imgs.length) {x = 0;} imgscroll (); สำหรับ (var i = 0; i <lis.length; i ++) {lis [i] .classname = } ย้าย (); // เริ่มฟังก์ชั่นการเลื่อนเริ่มต้น; btnr.onclick = function () {clearInterval (timer1); x ++; if (x> = imgs.length) {x = 0; } imgscroll (); เคลื่อนไหว(); } btnl.onclick = function () {clearInterval (timer1); x--; if (x <0) {x = imgs.length-1; } imgscroll (); เคลื่อนไหว(); } สำหรับ (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll (); เคลื่อนไหว(); }} </script> </body> </html>เอฟเฟกต์เฉพาะขึ้นอยู่กับผลกระทบของหน้านำทาง HAO123 ภาพม้าหมุน คุณสามารถไปที่เว็บไซต์เพื่ออ้างถึงมัน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น