JS ใช้อาร์เรย์เพื่อสร้างเอฟเฟกต์การสลับภาพสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
การแปลงตำแหน่งองค์ประกอบอาร์เรย์:
แบ่งเนื้อหาออกเป็นอาร์เรย์เพิ่มรายการแรกไปยังจุดสิ้นสุดและลบเนื้อหาแรก
<div id = "box"> 1,2,3,4 </div> <อินพุต type = "ปุ่ม" value = 'switch' id = 'input'> <pristr> window.onload = function () {var odiv = document.getElementById ('box'); var oinput = document.getElementById ('อินพุต'); oinput.onclick = function () {var arr = odiv.innerhtml.split (','); // console.log (arr); arr.push (arr [0]); // เพิ่มอันแรกไปยังจุดสิ้นสุดและลบ arr.shift แรก (); odiv.innerhtml = arr; }} </script>การจำลองภาพการสลับภาพ:
window.onload = function () {var adiv = document.getElementByTagname ('div'); var ainput = document.getElementsByTagname ('อินพุต'); var arr = []; // สร้างอาร์เรย์ที่ว่างเปล่าเพื่อจัดเก็บแอตทริบิวต์สำหรับ (var i = 0; i <adiv.length; i ++) {console.dir (getStyle (adiv [i], 'ซ้าย')); // รับสไตล์สุดท้ายที่บริสุทธิ์ // เพิ่มแอตทริบิวต์ arr.push ([getstyle (adiv [i], 'ซ้าย'), getstyle (adiv [i], 'top')]); } // console.dir (arr); ainput [0] .onclick = function () {// เพิ่มอันแรกไปที่ปลายและลบ arr.push แรก (arr [0]); arr.shift (); สำหรับ (var i = 0; i <adiv.length; i ++) {// หลังจากใช้งานอาร์เรย์แล้วกำหนด adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; - ainput [1] .onclick = function () {// เพิ่มอันสุดท้ายไปที่ด้านหน้าและลบ arr.unshift สุดท้าย (arr [arr.length-1]); arr.pop (); สำหรับ (var i = 0; i <adiv.length; i ++) {adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; - ฟังก์ชั่น getStyle (obj, attr) {// รับสไตล์สุดท้ายถ้า (obj.currentstyle) {return obj.currentstyle [attr]; } else {return getComputedStyle (obj, false) [attr]; -การเรนเดอร์ง่าย:
ตัวอย่างตัวอย่าง:
แนวคิด:
หากมีห้าภาพ: ค่าซ้ายของรูปที่ 1 ถึง 5 คือ: 20px, 60px, 100px, 240px และ 380px;
หลังจากคลิกปุ่มสลับซ้ายค่าที่สอดคล้องกันของรูปที่ 1 ถึง 5 จะกลายเป็น: 60px, 100px, 240px, 380px, 20px;
-
มันเทียบเท่ากับการย้ายองค์ประกอบแรกของชุดอาร์เรย์นี้ไปยังจุดสิ้นสุด: 20px, 60px, 100px, 240px, 380px, 20px;
จากนั้นลบองค์ประกอบแรกไปที่: 60px, 100px, 240px, 380px, 20px;
และอื่น ๆ :
ตัวอย่างเค้าโครง:
<div id = "box"> <ul> <li class = 'pos_0'> <img src = "ภาพ/1.png" width = '300'> </li> <li class = 'pos_1'> <img src = "ภาพ/1.jpg" width = '500'> </li> <li class = 'pos_3'> <img src = "ภาพ/3.jpg" width = '400'> </li> <li class = 'pos_4'> <img src = "ภาพ ' Dirr '> </span> </div>
รูปแบบตัวอย่าง:
#Box {WIDTH: 700PX; ความสูง: 300PX; ตำแหน่ง: สัมพัทธ์; มาร์จิ้น: 20px auto; ข้อความ-เรียงความ: center;}#box ul {list-style: none;}#box ul li {ตำแหน่ง: Absolute;}#box ul li.pos_0 {top: 50px; ซ้าย: 20px; li.pos_1 {top: 20px; ซ้าย: 60px; z-index: 2; opacity: 0.8;}#box ul li.pos_2 {top: 0px; ซ้าย: 100px; z-index: 3; opacity: 1;}#box ul li.pos_3 {top: 20px; li.pos_4 {top: 50px; ซ้าย: 380px; z-index: 1; ความทึบ: 0.5;}. dir {แสดง: inline-block; ความกว้าง: 45px; ความสูง: 100px; พื้นหลัง: url ('ภาพ/button.png') no-repeat; 0; ซ้าย: 40px;}. dirr {ตำแหน่งพื้นหลัง: -55px 0; ขวา: 40px;}รหัส JS:
window.onload = function () {var opre = document.getElementsByClassName ('dir') [0]; var onext = document.getElementsByClassName ('dir') [1]; var Ali = document.getElementsByTagname ('li'); var arr = []; สำหรับ (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagname ('img') [0]; // console.log (getStyle (Ali [i], 'ซ้าย')); // console.log (parseint (getStyle (Ali [i], 'Opacity')*100)); // console.log (getStyle (Ali [i], 'Z-index')); // console.log (oimg.width); arr.push ([parseint (getstyle (Ali [i], 'top')), parseint (getstyle (Ali [i], 'opacity')*100), parseint (getstyle (Ali [i], 'z-index')), oimg.width]); // console.log (arr [i] [2]); } // console.dir (arr); opre.onclick = function () {// arr.push ซ้าย (arr [0]); arr.shift (); สำหรับ (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagname ('img') [0]; //console.log(Arr'hiDi [2]); startmove (Ali [i], {ซ้าย: arr [i] [0], top: arr [i] [1], opacity: arr [i] [2],}); Ali [i] .style.zindex = arr [i] [3]; startmove (oimg, {width: arr [i] [4]}); - onext.onclick = function () {// arr.unshift ขวา (arr [arr.length-1]); arr.pop (); สำหรับ (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagname ('img') [0]; startmove (Ali [i], {ซ้าย: arr [i] [0], top: arr [i] [1], opacity: arr [i] [2],}); Ali [i] .style.zindex = arr [i] [3]; startmove (oimg, {width: arr [i] [4]}); - ฟังก์ชั่น getStyle (obj, attr) {// รับค่าของหน่วยถ้า (obj.currentstyle) {return obj.currentstyle [attr]; } else {return getComputedStyle (obj, false) [attr]; -ภาพการทำซ้ำ:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น