เอฟเฟกต์ภาพ JS Carousel ที่ทุกคนชอบฉันจะแบ่งปันกับคุณ
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; ระยะขอบ: 0px;}. swapimg {ตำแหน่ง: สัมบูรณ์; } .BTN {ตำแหน่ง: สัมบูรณ์; ความสูง: 90px; ความกว้าง: 60px; ความเป็นมา: RGBA (0,0,0,0.5);/*ตั้งค่าสีพื้นหลังเป็นสีดำและความโปร่งใสคือ 50%*/ สี: #FFFFFF; TEXT-ALIGN: CENTER; ความสูงของสาย: 90px; ขนาดตัวอักษร: 40px; ด้านบน: 155px;/*ความสูงของภาพ 400/2-45*/เคอร์เซอร์: ตัวชี้; /*display:none ;*/}.btnright {ซ้าย: 840px;/*ความกว้างของภาพความกว้าง 900-navigation 60*/}#แท็บ {ตำแหน่ง: สัมบูรณ์; ด้านบน: 370px; ขอบซ้าย: 350px;}. แท็บ {ความสูง: 20px; ความกว้าง: 20px; ความเป็นมา:#05E9E2; ความสูงของสาย: 20px; TEXT-ALIGN: CENTER; ขนาดฟอนต์: 10px; ลอย: ซ้าย; สี: #ffffff; มาร์จิ้น-ขวา: 10px; แนวชายแดน: 100%; เคอร์เซอร์: ตัวชี้;}. bg {พื้นหลัง:#00ff21;}รหัส JS:
/// <path reference = "_ references.js"/> var i = 0; // ตัวแปรส่วนกลาง // กำหนดตัวแปรเพื่อให้ได้กระบวนการของ Carousel var time; $ (function () {// 1 หลังจากโหลดหน้าเว็บแล้วค้นหาวัตถุแรกที่มีคลาสเท่ากับ Swapimg $ (". swapimg"). eq (0). show (). พี่น้อง (). ซ่อน (); // จะหยุดการทำงานของเมาส์ได้อย่างไร? -1 ถ้า (I == 0) {i = 6; function show () {//$("#allswapimg").hover(function () // {// $ (". btn"). show (); //}, function () // {// $ (". btn"). ซ่อน (); //}); // fadein (300) จางหายไป, fadeout (300) จางหายไป, เวลาการกรอง 0.3s $ (". swapimg"). eq (i) .fadein (300) .siblings (). fadeout (); $ (". tab"). eq (i) .addclass ("bg"). siblings (). RemoveClass ("bg");} function Showtime () {time = setInterval (function () {i ++; ถ้า (i == 6) {// มีเพียง 6 ภาพ }, 3000);}ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น