JS menggunakan array untuk membuat efek switching gambar untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Transformasi posisi elemen array:
Pisahkan konten menjadi array, tambahkan yang pertama ke akhir, dan hapus yang pertama
<Div id = "box"> 1,2,3,4 </div> <input type = "tombol" value = 'switch' id = 'input'> <script> window.onload = function () {var odiv = document.getElementById ('box'); var oinput = document.getElementById ('input'); oinput.onClick = function () {var arr = odiv.innerHtml.split (','); // console.log (arr); arr.push (arr [0]); // Tambahkan yang pertama ke ujung dan hapus arr.shift pertama (); odiv.innerhtml = arr; }} </script>Efek switching gambar simulasi:
window.onload = function () {var adiv = document.geteLementsByTagname ('div'); var input = document.geteLementsByTagname ('input'); var arr = []; // Buat array kosong untuk menyimpan atribut untuk (var i = 0; i <adiv.length; i ++) {console.dir (getStyle (adiv [i], 'left')); // Dapatkan gaya akhir murni // tambahkan atribut sebagai array yang sesuai untuk array, yang dapat digunakan untuk multi-attribute // arr.push ([getStyle (adiv [i], 'left'), getstyle (adiv [i], 'top')]); } // console.dir (arr); AInput [0] .onClick = function () {// Tambahkan yang pertama ke ujung dan hapus arr.push pertama (arr [0]); arr.shift (); untuk (var i = 0; i <adiv.length; i ++) {// Setelah mengoperasikan array, menilai kembali adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; AInput [1] .onClick = function () {// Tambahkan yang terakhir ke depan dan hapus arr.unshift terakhir (arr [arr.length-1]); arr.pop (); untuk (var i = 0; i <adiv.length; i ++) {adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; function getStyle (obj, attr) {// Dapatkan gaya terakhir if (obj.currentstyle) {return obj.currentstyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }}}Rendering Sederhana:
Versi contoh:
Ide:
Jika ada lima gambar: Nilai kiri Gambar 1 hingga 5 adalah: 20px, 60px, 100px, 240px, dan 380px;
Setelah mengklik tombol sakelar kiri, nilai yang sesuai dari Gambar 1 hingga 5 kiri menjadi: 60px, 100px, 240px, 380px, 20px;
-----------------------------------------------------------------------------------------------------------------------------
Ini setara dengan memindahkan elemen pertama dari set array ini ke akhir: 20px, 60px, 100px, 240px, 380px, 20px;
Kemudian hapus elemen pertama ke: 60px, 100px, 240px, 380px, 20px;
Dan sebagainya:
Tata letak contoh:
<Div id = "box"> <ul> <li class = 'pos_0'> <img src = "gambar/1.png" width = '300'> </li> <li class = 'pos_1'> <img src = "gambar/1.jpg" lebar = '400'> </li> <li class = 'pos_2'> <"Imger =" 400 '> </Li> <Li class =' POS_2 '> <"Images =" 400'> </Li> <Li class = 'POS_2'> <"Images =" Images = "Images =" Images = "Imger =" Imger = "Imger =" Imger = "Imgg" POS_J " width='500'></li> <li class='pos_3'><img src="images/3.jpg" width='400'></li> <li class='pos_4'><img src="images/1.jpg" width='300'></li> </ul> <span class='dir dirl'></span> <span class='dir Dirr '> </span> </div>
Gaya contoh:
#box {width: 700px; tinggi: 300px; Posisi: relatif; margin: 20px auto; text-align: center;}#box ul {List-style: none;}#box ul li {position: absolute;}#box ul li.pos_0 {top: 50px; kiri: 20px; z-index: 0; oP; 50px; 20px: 20px; z-index: 0; oP; 50px; 20px: 20px; z-index: 0; oP; 50px; 20px: 20px: z-index: oP; {50px; 20px: 20px; z-index: oP; {50px; 20px; 20px Li.pos_1 {Top: 20px; kiri: 60px; z-index: 2; opacity: 0.8;}#box ul li.pos_2 {Top: 0px; kiri: 100px; z-index: 3; opacity: 1;}#box ul li.pos_3 {top: 20px; 240px; uL. Li.pos_4 {Top: 50px; kiri: 380px; z-index: 1; opacity: 0.5;}. Dir {display: inline-block; lebar: 45px; tinggi: 100px; latar belakang: url ('gambar/tombol.png') no-repeat; posisi: absolute; 60px: 60px: butpon.png ') no-repeat; posisi: absolute; top: 60px: od-odx: {60px: 60px: {60px: {60px: {60px: 60px: {60px: {60px: {60px: 60px: 60px: 60px: 60px: 60px: {60px: {60px: {60px: {60px: 60px: 60px: 60px: 60px: 60px: 60px; 0; kiri: 40px;}. Dirr {latar belakang -posisi: -55px 0; kanan: 40px;}Kode JS:
window.onload = function () {var opre = document.geteLementsbycasname ('dir') [0]; var Onext = document.geteLementsByClassName ('dir') [1]; var ali = document.geteLementsbyTagname ('li'); var arr = []; untuk (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .geteLementsByTagname ('img') [0]; // console.log (getStyle (Ali [i], 'left')); // 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 () {// kiri arr.push (arr [0]); arr.shift (); untuk (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .geteLementsByTagname ('img') [0]; //console.log(arrhtiace med startMove (ali [i], {kiri: arr [i] [0], atas: arr [i] [1], opacity: arr [i] [2],}); Ali [i] .style.zindex = arr [i] [3]; startMove (oimg, {width: arr [i] [4]}); }}; Onext.onClick = function () {// kanan arr.unshift (arr [arr.length-1]); arr.pop (); untuk (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .geteLementsByTagname ('img') [0]; startMove (ali [i], {kiri: arr [i] [0], atas: arr [i] [1], opacity: arr [i] [2],}); Ali [i] .style.zindex = arr [i] [3]; startMove (oimg, {width: arr [i] [4]}); }}; fungsi getStyle (obj, attr) {// Dapatkan nilai unit IF (obj.currentstyle) {return obj.currentstyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }}}Gambar reproduksi:
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.