1. ประเด็นสำคัญ:
1. เมื่อโหลดหน้าเว็บรูปภาพจะทับซ้อนและวางซ้อนกัน [การวางตำแหน่งสัมบูรณ์];
2. ภาพแรกแสดงให้เห็นว่าภาพอื่น ๆ ถูกซ่อนไว้;
3. ตั้งค่าตัวห้อยและตั้งค่าสีของตัวห้อยเพื่อให้มันเคลื่อนที่ด้วยรูปภาพ
4. เลื่อนเมาส์ไปที่รูปภาพแสดงไอคอนด้านซ้ายและขวาย้ายไอคอนย้ายเมาส์ออกไปและเดินต่อไปยังม้าหมุน
2. รหัสการใช้งาน:
รหัส HTML:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "html; charset = utf-8"/> href = "css/lunbimg.css" rel = "stylesheet"/> <script src = "js/jQuery-1.10.2.min.js"> </script> <script src = "js/lunbimg.js"> </script> </head> /> </div> <div> <img src = "image/2.jpg"/> </div> <div> <img src = "image/3.jpg"/> </div> <div> <img src = "image/4.jpg"/> </div> src = "image/6.jpg"/> </div> </div> <div> <</div> <div>> </div> <div id = "แท็บ"> <div> 1 </div> </div> 2 </div>
รหัส CSS:
* {padding: 0px; margin: 0px;}. swapimg {ตำแหน่ง: สัมบูรณ์;}. btn {ตำแหน่ง: สัมบูรณ์; ความสูง: 90px; ความกว้าง: 60px; พื้นหลัง: rgba (0,0,0,0,0.5);/* ตั้งค่าสีพื้นหลังเป็นสีดำ 50%*/สี: #FFFFFF; TEXT-ALIGN: CENTRE; LINE-HEIGHT: 90PX; FONT-SIZE: 40PX; TOP: 155PX;/*ความสูงของภาพ 400/2-45*/เคอร์เซอร์: pointer;/*จอแสดงผล: ไม่มี;*/}. btnright {ซ้าย: 840px; {ตำแหน่ง: Absolute; Top: 370px; margin-left: 350px;}. {ความสูง: 20px; ความกว้าง: 20px; พื้นหลัง:#05E9E2; สายไฟ: 20px; ข้อความ-เรียงความ: กลาง; ฟอนต์ขนาด: 10px; ลอย: ซ้าย; สี: #ffffff;รหัส JS:
/// <path reference = "_ references.js"/> var i = 0; // ตัวแปรส่วนกลาง // กำหนดตัวแปรเพื่อรับเวลา Carousel var เวลา; $ (function () {// 1 หลังจากโหลดหน้าเว็บแล้วค้นหาวัตถุแรกที่มีคลาสเท่ากับ Swapimg $ (". swapimg"). eq (0). show (). พี่น้อง (). ซ่อน (); showtime (); // เมื่อเมาส์วางอยู่บนตัวห้อยเพื่อแสดงภาพเมาส์จะเคลื่อนที่ออกไป $ (นี่) .index (); show (); // วิธีการหยุดหลังจากเมาส์ถูกใส่? ClearInterval (เวลา); // หลังจากคลิก, -1if (i == 0) {i = 6;} i -; show (); showtime ();}); $ (". btnright") คลิก (ฟังก์ชั่น () {// 1. ก่อนคลิก -1;} i ++; show (); showtime ();});}); function show () {//$("#allswapimg" j. hover(function () // {// $ (". btn"). show (); //}, ฟังก์ชั่น () จางหายไป, fadeout (300) จางหายไป, เวลากรอง 0.3s $ (". swapimg"). eq (i) .fadein (300) .Siblings (). fadeout (); $ (". tab"). eq (i). setInterval (function () {i ++; ถ้า (i == 6) {// มีเพียง 6 รูปภาพดังนั้นฉันไม่เกิน 6. ถ้าฉันเท่ากับ 6 เราจะทำให้มันเท่ากับภาพแรก i = 0;} show ();}, 3000);};ด้านบนเป็นรหัสของการใช้งานแผนภาพม้าหมุนตาม JavaScript ที่แนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!