O JS usa matrizes para criar efeitos de comutação de imagem para sua referência. O conteúdo específico é o seguinte
Transformação da posição do elemento da matriz:
Divida o conteúdo em uma matriz, adicione a primeira ao final e exclua o primeiro
<div id = "box"> 1,2,3,4 </div> <input type = "button" value = 'switch' id = 'input'> <cript> window.onload = function () {var odiv = document.getElementById ('caixa'); var oinput = document.getElementById ('input'); oinput.OnClick = function () {var arr = odiv.innerhtml.split (','); // console.log (arr); Arr.push (arr [0]); // Adicione o primeiro ao final e exclua o primeiro arr.shift (); odiv.innerhtml = arr; }} </script>Efeito de comutação de imagem de simulação:
window.onload = function () {var adiv = document.getElementsByTagName ('div'); var ainput = document.getElementsByTagName ('input'); var arr = []; // Crie uma matriz vazia para armazenar atributos para (var i = 0; i <adiv.length; i ++) {console.dir (getStyle (adiv [i], 'esquerda')); // obtenha o estilo final puro // adicionar atributos como matrizes de conformidade, que podem ser usadas para Multi-Ttr ar.push ([getStyle (adiv [i], 'esquerda'), getStyle (adiv [i], 'top')]); } // console.dir (arr); ainput [0] .OnClick = function () {// Adicione o primeiro ao final e exclua o primeiro ar arr.push (arr [0]); arr.shift (); for (var i = 0; i <adiv.length; i ++) {// Após operar a matriz, reatribua adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; ainput [1] .OnClick = function () {// Adicione o último à frente e exclua o último ar. Arr.pop (); for (var i = 0; i <adiv.length; i ++) {adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; function getStyle (obj, att) {// obtenha o estilo final se (obj.currentStyle) {return obj.currentstyle [att]; } else {return getComputedStyle (obj, false) [att]; }}}Renderizações simples:
Exemplo de versão:
Ideias:
Se houver cinco imagens: os valores esquerdos das Figuras 1 a 5 são: 20px, 60px, 100px, 240px e 380px;
Depois de clicar no botão de alternância esquerda, os valores correspondentes da Figura 1 a 5 esquerda tornam -se: 60px, 100px, 240px, 380px, 20px;
--------------------------------------------------------------------------------------------------------------------------------------------------
É equivalente a mover o primeiro elemento deste conjunto de matriz para o final: 20px, 60px, 100px, 240px, 380px, 20px;
Em seguida, exclua o primeiro elemento para: 60px, 100px, 240px, 380px, 20px;
E assim por diante:
Exemplo de layout:
<div id = "Caixa"> <ul> <li class = 'pos_0'> <img src = "imagens/1.png" width = '300'> </li> <li class = 'pos_1'> <img src = "imagens/1.jpg" width = '400'> </li> <li class = posse_2 '> 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>
Estilo de exemplo:
#box {width: 700px; altura: 300px; posição: relativa; margem: 20px automático; text-align: Center;}#caixa ul {estilo list: nenhum;}#box ul li {position: absoluto;}#caixa ul li.pos_0 {top: 50px; esquerda: 20px; li.pos_1 {topo: 20px; esquerda: 60px; z-index: 2; opacidade: 0,8;}#caixa ul li.pos_2 {top: 0px; esquerda: 100px; z-index: 3; opacia: 1;}#caixa ul.pos_3 {top: 20px; esquerda; 240px; li.pos_4 {topo: 50px; esquerda: 380px; z-index: 1; opacidade: 0,5;}. Dir {display: Block inline; largura: 45px; altura: 100px; fundo: Url ('imagens/botão.png') no-repetir; posição; 0; esquerda: 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], 'esquerda')); // console.log (parseint (getStyle (ali [i], 'opacidade')*100)); // console.log (getStyle (ali [i], 'z-index')); // console.log (oimg.width); Arr.push ([parseint (getStyle (Ali [i], 'top')), parseint (getStyle (Ali [i], 'opacidade')*100), parseint (getStyle (Ali [i], 'z-index')), oimg.width]); // console.log (arr [i] [2]); } // console.dir (arr); OPRE.ONCLICK = function () {// esquerda arr.push (arr [0]); arr.shift (); for (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagName ('img') [0]; //Console.Log(arr[i-/2012]); startMove (Ali [i], {esquerda: arr [i] [0], topo: arr [i] [1], opacidade: arr [i] [2],}); ali [i] .style.zindex = arr [i] [3]; startmove (oimg, {width: 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], {esquerda: arr [i] [0], topo: arr [i] [1], opacidade: arr [i] [2],}); ali [i] .style.zindex = arr [i] [3]; startmove (oimg, {width: arr [i] [4]}); }}; função getStyle (obj, att) {// obtenha o valor da unidade if (obj.currentStyle) {return obj.currentstyle [att]; } else {return getComputedStyle (obj, false) [att]; }}}Imagem de reprodução:
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.