บทความนี้แบ่งออกเป็นบทความก่อนหน้าและต่อไป ฉันแบ่งปันเอฟเฟกต์คลาสสิกแปดอย่างของ JS Focus Carousel สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
เค้าโครงพื้นฐาน:
<div id = "box"> <ul id = "ul"> <li style = 'display: block;'> <img src = "images/1.jpg"> </li> <li> <img src = "images/2.jpg"> </li> <li> <li> <img src = "images/5.jpg"> </li></ul> <ol id = 'ol'> <li class = 'active'> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li>
-
1. แผนที่โฟกัสปกติ
window.onload = function () {var oul = document.getElementById ('ul'); var ali_u = oul.getElementsByTagname ('li'); var ool = document.getElementById ('ol'); var ali_o = ool.getElementsByTagname ('li'); สำหรับ (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; Ali_o [i] .onMouseOver = function () {สำหรับ (var i = 0; i <ali_o.length; i ++) {Ali_o [i] .className = ''; Ali_u [i] .style.display = 'ไม่มี'; } this.className = 'active'; // console.log (ALI_O [this.index]); Ali_u [this.index] .style.display = 'block'; -การทำซ้ำ: ละเว้นรูปภาพ
2. ผลกระทบจางหายไป
var oul = document.getElementById ('ul'); var ali_u = oul.getElementsByTagname ('li'); var ool = document.getElementById ('ol'); var Ali_o = ool.getElementByTagname ('Li'); Ali_o [i] .onMouseOver = function () {สำหรับ (var i = 0; i <ali_o.length; i ++) {Ali_o [i] .className = ''; Ali_u [i] .style.display = 'ไม่มี'; Ali_u [i] .style.filter = 'alpha (ความทึบ = 0)'; Ali_u [i] .style.Opacity = 0; } this.className = 'active'; Ali_u [this.index] .style.display = 'block'; startmove (Ali_u [this.index], {ความทึบ: 100}); -ภาพการทำซ้ำ:
3. เลื่อนขึ้นเอฟเฟกต์:
var oul = document.getElementById ('ul'); var ali_u = oul.getElementsByTagname ('li'); var ool = document.getElementById ('ol'); var ali_o = ool.getElementByTagname ('li'); i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; Ali_o [i] .onMouseOver = function () {สำหรับ (var i = 0; i <ali_o.length; i ++) {Ali_o [i] .className = ''; this.className = 'active'; startmove (oul, {top: -his.index*liheight}); -ภาพการทำซ้ำ:
4. เลื่อนขึ้นและลงเป็นประจำ:
window.onload = function () {var obox = document.getElementById ('box'); var oul = document.getElementById ('ul'); var ali_u = oul.getElementsByTagname ('li'); var ool = document.getElementById ('ol'); var ali_o = ool.getElementsByTagname ('li'); var liheight = Ali_U [0] .OffSetheight; var inow = 0; // ดัชนีปัจจุบันตัวจับเวลา var = null; // ตัวจับเวลาสำหรับ (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; Ali_o [i] .onMouseOver = function () {สำหรับ (var i = 0; i <ali_o.length; i ++) {Ali_o [i] .className = ''; this.className = 'active'; // สร้างความสัมพันธ์: Inow ที่สำคัญมาก = this.index; startmove (oul, {top: -his.index*liheight}); - // เปิดตัวจับเวลาตัวจับเวลา = setInterval (Torun, 2000); obox.onmouseover = function () {clearInterval (ตัวจับเวลา); - obox.onmouseout = function () {timer = setInterval (Torun, 2000); - // ฟังก์ชั่นฟังก์ชั่นฟังก์ชั่น TORUN () {ถ้า (inow == ALI_O.Length-1) {inow = 0; } else {inow ++; } สำหรับ (var i = 0; i <ali_o.length; i ++) {Ali_o [i] .className = ''; } ALI_O [Inow] .className = 'Active'; startmove (oul, {top: -inow*liheight}); -ภาพการทำซ้ำ:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com และให้ความสนใจกับม้าหมุนโฟกัสที่น่าตื่นเต้นมากขึ้น