ดำเนินการต่อไปยังบทความก่อนหน้านี้เพื่อเรียนรู้การใช้งาน JS Focus Carousels แปดประเภทอย่างสมบูรณ์แบบ (บทความก่อนหน้า) สำหรับการอ้างอิงของคุณเนื้อหาเฉพาะมีดังนี้
5. เลื่อนขึ้นและลงอย่างต่อเนื่องอย่างราบรื่น
แนวคิด:
1. ความคิด 1: คัดลอกหนึ่งสำเนาของ UL แต่กลับไปที่ตำแหน่งครึ่งระยะการเลื่อน (เว็บไซต์ขนาดใหญ่ดำเนินการต่ำกว่าเล็กน้อย);
2. ความคิด 2: ผ่านการวางตำแหน่งสัมพัทธ์ย้าย LI แรกไปยังจุดสิ้นสุดแล้วกลับ UL และ LI ไปยังตำแหน่ง
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 inow2 = 0; // ใช้เพื่อเลื่อน var timer = 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; inow2 = this.index; startmove (oul, {top: -his.index*liheight}); - } timer = setInterval (Torun, 2000); obox.onmouseover = function () {clearInterval (ตัวจับเวลา); - obox.onmouseout = function () {timer = setInterval (Torun, 2000); - function torun () {ถ้า (inow == 0) {// คืนค่า li และวาง ul li_u [0] .style.position = 'คงที่'; oul.style.top = 0; // อย่าลืมคืนค่า inow2 เป็น inow2 = 0; } if (inow == ALI_O.Length-1) {// ย้าย li แรกไปยัง inow สุดท้าย = 0; ALI_U [0] .style.position = 'ญาติ'; Ali_u [0] .style.top = Ali_u.length*liheight+'px'; } else {inow ++; } INOW2 ++; สำหรับ (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } ALI_O [Inow] .className = 'Active'; startmove (oul, {top: -inow2*liheight}); -ภาพการทำซ้ำ:
6. ผลของการสลับระหว่างซ้ายและขวาอย่างราบรื่น
แนวคิด:
1. การวางตำแหน่งสัมบูรณ์: LI ทั้งหมดยกเว้นอันแรกจะอยู่ทางด้านขวาเปรียบเทียบค่าดัชนีกับดัชนีปัจจุบันและค้นหาตำแหน่งของ LI ที่จะปรากฏ
2. เพิ่ม "สวิตช์" หรือ "ช่วงเวลา" เพื่อควบคุมความถี่การสลับการเคลื่อนไหว!
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 liwidth = Ali_u [0] .OffSetWidth; var inow = 0; var bbtn = true; // ตำแหน่งทั้งหมดไปทางขวายกเว้นรายการแรกสำหรับ (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = liwidth+'px'; } สำหรับ (var i = 0; i <ali_o.length; i ++) {Ali_o [i] .index = i; ALI_O [i] .onMouseOver = function () {ถ้า (bbtn) {bbtn = false; สำหรับ (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } this.className = 'active'; // ตัดสินกะซ้ายและขวาถ้า (inow <this.index) {// ค้นหา li ali_u [this.index] .style.left = liwidth+'px'; // ย้าย li startmove ปัจจุบัน (Ali_u [inow], {ซ้าย: -liwidth}); } อื่นถ้า (inow> this.index) {Ali_u [this.index] .style.left = -liwidth+'px'; startmove (Ali_u [inow], {ซ้าย: liwidth}); } startMove (ALI_U [this.index], {ซ้าย: 0}, ฟังก์ชัน () {bbtn = true; // การเคลื่อนไหวครั้งต่อไปสามารถทำได้หลังจากการเคลื่อนไหวปัจจุบันเสร็จสิ้น}); // กำหนดดัชนีปัจจุบันเป็น inow = this.index; } // สวิตช์ถ้าสิ้นสุด}; -ภาพการทำซ้ำ:
7. ผลกระทบหีบเพลง
1. ความคิด 1: ทำโดยการเปลี่ยนความกว้างของ Li;
2. IDEA 2: LI ทั้งหมดยกเว้นรายการแรกอยู่ในตำแหน่งที่เท่ากันและตำแหน่งจะเปลี่ยนไปอย่างเท่าเทียมกันหลังจากเหตุการณ์ถูกเรียกใช้
window.onload = function () {var oul = document.getElementById ('ul'); var ali_u = oul.getElementsByTagname ('li'); // การวางตำแหน่งทั้งหมดยกเว้นรายการแรกสำหรับ (var i = 1; i <ali_u.length; i ++) {// isometric 30px การวางตำแหน่ง Ali_u [i] .style.left = (470-3*40)+(i-1)*30+'px'; } สำหรับ (var i = 0; i <ali_u.length; i ++) {Ali_u [i] .index = i; Ali_u [i] .onMouseOver = function () {สำหรับ (var i = 0; i <ali_u.length; i ++) {Ali_u [i] .index = i; ALI_U [i] .onMouseOver = function () {สำหรับ (var i = 0; i <ali_u.length; i ++) {ถ้า (i <= this.index) {// การจัดเรียงซ้ายทั้งหมดเล็กกว่าดัชนีเริ่มต้น (Ali_u [i], {ซ้าย: i*30}); } else {// การจัดเรียงที่ถูกต้องทั้งหมดใหญ่กว่า INDEX StartMove (ALI_U [I], {ซ้าย: (470-3*40)+(I-1)*30}); -ภาพการทำซ้ำ:
8. หีบเพลงเอฟเฟกต์ 2
ตำแหน่ง Li อย่างเท่าเทียมกันบนพื้นฐานก่อนหน้านี้!
window.onload = function () {var oul = document.getElementById ('ul'); var ali_u = oul.getElementsByTagname ('li'); var num = math.ceil (470/ALI_U.Length); // ความกว้างของแต่ละ // ตำแหน่งทั้งหมดยกเว้นรายการแรกสำหรับ (var i = 1; i <ali_u.length; i ++) {Ali_u [i] .style.left = num*i+'px'; } สำหรับ (var i = 0; i <ali_u.length; i ++) {Ali_u [i] .index = i; Ali_u [i] .onMouseOver = function () {สำหรับ (var i = 0; i <ali_u.length; i ++) {Ali_u [i] .index = i; Ali_u [i] .onMouseOver = function () {สำหรับ (var i = 0; i <ali_u.length; i ++) {ถ้า (i <= this.index) {startmove (Ali_u [i], {ซ้าย: i*30}); } else {startmove (Ali_u [i], {ซ้าย: (470-3*40)+(i-1)*30}); - Ali_u [i] .onMouseOut = function () {สำหรับ (var i = 0; i <ali_u.length; i ++) {startmove (Ali_u [i], {ซ้าย: num*i}); - -ภาพการทำซ้ำ:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น