JS usa matrices para crear efectos de conmutación de imágenes para su referencia. El contenido específico es el siguiente
Transformación de la posición del elemento de matriz:
Divida el contenido en una matriz, agregue el primero al final y elimine el primero
<div id = "box"> 1,2,3,4 </div> <input type = "button" 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]); // Agregue el primero al final y elimine el primer arr.hift (); odiv.innerhtml = arr; }} </script>Efecto de conmutación de imagen de simulación:
Window.Onload = function () {var adiv = document.getElementsBytagName ('div'); var ainput = document.getElementsBytagName ('input'); var arr = []; // Cree una matriz vacía para almacenar atributos para (var i = 0; i <adiv.length; i ++) {console.dir (getStyle (adiv [i], 'izquierda')); // Obtener el estilo final puro // Agregar atributos como matrices de conformidad a Arr, que se puede utilizar para multi-atributo arr.push ([getStyle (adiv [i], 'izquierda'), getStyle (adiv [i], 'top')]); } // console.dir (arr); ainput [0] .Onclick = function () {// Agregue el primero al final y elimine el primer arr.push (arr [0]); arr.hift (); for (var i = 0; i <adiv.length; i ++) {// Después de operar la matriz, reasignar adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; ainput [1] .Onclick = function () {// Agregue el último al frente y elimine el último arr.unshift (arr [arr.length-1]); arr.pop (); for (var i = 0; i <adiv.length; i ++) {adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; función getStyle (obj, attr) {// Obtener el estilo final if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }}}Renderizaciones simples:
Versión de ejemplo:
Ideas:
Si hay cinco imágenes: los valores izquierdos de las Figuras 1 a 5 son: 20px, 60px, 100px, 240px y 380px;
Después de hacer clic en el botón de alternancia izquierda, los valores correspondientes de la Figura 1 a 5 izquierda se convierten en: 60px, 100px, 240px, 380px, 20px;
----------------------------------------------------------------------------------------------------------------------------
Es equivalente a mover el primer elemento de este conjunto de matriz al final: 20px, 60px, 100px, 240px, 380px, 20px;
Luego elimine el primer elemento a: 60px, 100px, 240px, 380px, 20px;
Etcétera:
Diseño de ejemplo:
<div id = "box"> <ul> <li class = 'pos_0'> <img src = "images/1.png" width = '300'> </li> <li class = 'pos_1'> <img src = "imágenes/1.jpg" width = '400'> </li> <li class = 'pos_2'> <img src = "imágenes/" 2.Jpg " width = '500'> </li> <li class = 'pos_3'> <img src = "imágenes/3.jpg" width = '400'> </li> <li class = 'pos_4'> <img src = "imágenes/1.jpg" width = '300'>> </li> </ul> <span class = 'diry dirr '> </span> </div>
Estilo de ejemplo:
#box {ancho: 700px; altura: 300px; posición: relativo; margin: 20px automático; text-align: center;}#box ul {list-style: none;}#box ul {posicion: absoluta;}#box ul li.pos_0 {top: 50px; izquierda: 20px; z-idex: 1; opacidad: 0.5;}### li.pos_1 {top: 20px; izquierda: 60px; z-index: 2; opacidad: 0.8;}#box ul li.pos_2 {top: 0px; izquierda: 100px; z-index: 3; opacidad: 1;}#box ul li.pos_3 {top: 20px; izquierda: 240px; z-intex: 2;#0.8; li.pos_4 {top: 50px; izquierda: 380px; z-index: 1; opacidad: 0.5;}. dir {display: inline-block; width: 45px; height: 100px; fondos: url ('images/button.png') No-repeat; posición: absoluto; top: 60px; z-index: 4;} 0; izquierda: 40px;}. Dirr {Posición de fondo: -55px 0; derecha: 40px;}Código JS:
Window.Onload = function () {var opre = document.getElementsByClassName ('dir') [0]; var Onext = document.getElementsByClassName ('dir') [1]; var ali = document.getElementsByTagName ('li'); var arr = []; for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsBytagName ('img') [0]; // console.log (getStyle (ali [i], 'izquierda')); // console.log (parseInt (getStyle (ali [i], 'opacidad')*100)); // console.log (getStyle (ali [i], 'z-índice')); // console.log (oimg.width); arr.push ([parseint (getStyle (ali [i], 'top'), parseInt (getStyle (ali [i], 'opacidad')*100), parseInt (getStyle (ali [i], 'z-odex')), oimg.width]); // console.log (arr [i] [2]); } // console.dir (arr); opre.OnClick = function () {// izquierda arr.push (arr [0]); arr.hift (); for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsBytagName ('img') [0]; //console.log(arrigarefont>igh .2]); startmove (ali [i], {izquierda: arr [i] [0], arriba: arr [i] [1], opacidad: arr [i] [2],}); Ali [i] .style.zindex = arr [i] [3]; startMove (oimg, {ancho: arr [i] [4]}); }}; ONEXT.OnClick = function () {// Right arr.unshift (arr [arr.length-1]); arr.pop (); for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsBytagName ('img') [0]; startmove (ali [i], {izquierda: arr [i] [0], arriba: arr [i] [1], opacidad: arr [i] [2],}); Ali [i] .style.zindex = arr [i] [3]; startMove (oimg, {ancho: arr [i] [4]}); }}; función getStyle (obj, attr) {// Obtener el valor de la unidad if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }}}Imagen de reproducción:
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.