JS utilise des tableaux pour créer des effets de commutation d'image pour votre référence. Le contenu spécifique est le suivant
Transformation de la position de l'élément de tableau:
Divisez le contenu en un tableau, ajoutez le premier à la fin et supprimez le premier
<div id = "box"> 1,2,3,4 </ div> <input type = "bouton" value = 'switch' id = 'input'> <cript> window.onload = function () {var odiv = document.getElementById ('box'); var oinput = document.getElementById ('entrée'); Oinput.OnClick = function () {var arr = odiv.innerhtml.split (','); // console.log (arr); arr.push (arr [0]); // ajouter le premier à la fin et supprimer le premier arr.shift (); odiv.innerhtml = arr; }} </ script>Effet de commutation d'image de simulation:
window.onload = function () {var adiv = document.getElementsByTagName ('div'); var ainput = document.getElementsByTagName ('entrée'); var arr = []; // Créez un tableau vide pour stocker des attributs pour (var i = 0; i <adiv.length; i ++) {console.dir (getStyle (adiv [i], 'gauche')); // obtenir le style final pur // Ajouter des attributs en tant que réseaux conformes à l'arr, qui peuvent être utilisés pour l'attribut multi-attribution multiple arr.push ([getStyle (adiv [i], 'gauche'), getStyle (adiv [i], 'top')]); } // console.dir (arr); ainput [0] .OnClick = function () {// Ajoutez le premier à la fin et supprimez le premier arr.push (arr [0]); arr.shift (); pour (var i = 0; i <adiv.length; i ++) {// Après avoir fonctionné le tableau, réaffectez adiv [i] .style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; ainput [1] .OnClick = function () {// Ajoutez le dernier à l'avant et supprimez le dernier 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]; }}; fonction getStyle (obj, attr) {// Obtenez le style final if (obj.currentStyle) {return obj.currentStyle [att]; } else {return getCompuledStyle (obj, false) [att]; }}}Rendements simples:
Exemple de version:
Idées:
S'il y a cinq images: les valeurs gauche des figures 1 à 5 sont: 20px, 60px, 100px, 240px et 380px;
Après avoir cliqué sur le bouton bascule gauche, les valeurs correspondantes de la figure 1 à 5 gauche deviennent: 60px, 100px, 240px, 380px, 20px;
--------------------------------------------------------------------------------------------------------------------------------
Il équivaut à déplacer le premier élément de cet ensemble de tableau à la fin: 20px, 60px, 100px, 240px, 380px, 20px;
Ensuite, supprimez le premier élément à: 60px, 100px, 240px, 380px, 20px;
Et ainsi de suite:
Exemple de mise en page:
<div id = "box"> <ul> <li class = 'pos_0'> <img src = "images / 1.png" width = '300'> </li> <li class = 'pos_1'> <img src = "images / 1.jpg" width = '400'> </li> <li class = 'pos_2'> <img src = "images / 2.jp" 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 = 'dirr diirl'> </ spander> dirr '> </span> </div>
Exemple de style:
#box {width: 700px; hauteur: 300px; position: relatif; marge: 20px auto; text-align: Center;} # box ul {list-style: Aucun;} # box ul li {position: absolu;} # box ul li.pos_0 {top: 50px; gauche: 20px; z-index: 1; opacité: 0,5;} # # box ul li.pos_1 {top: 20px; gauche: 60px; z-index: 2; opacité: 0,8;} # box ul li.pos_2 {top: 0px; gauche: 100px; z-index: 3; opacité: 1;} # box ul li.pos_3 {top: 20px; gauche: 240px; z-index: 2; opacité: 0,8; li.pos_4 {top: 50px; gauche: 380px; z-index: 1; opacité: 0,5;}. dir {affichage: block en ligne; largeur: 45px; hauteur: 100px; arrière-plan: url ('images / bouton.png') no-repeat; position: AbsUlue; top: 60pos; 0; gauche: 40px;}. Dirr {position de fond: -55px 0; à droite: 40px;}Code js:
window.onload = function () {var opre = document.getElementsByClassName ('dir') [0]; var onexed = document.getElementsByClassName ('dir') [1]; var ali = document.getElementsByTagName ('li'); var arr = []; pour (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTAGName ('img') [0]; // console.log (getStyle (ali [i], 'gauche')); // console.log (parseInt (getStyle (ali [i], 'opacité') * 100)); // console.log (getStyle (Ali [i], 'z-index')); // Console.log (OIMG.Width); arr.push ([parseInt (getStyle (ali [i], 'top')), parseInt (getStyle (ali [i], 'opacité') * 100), parseInt (getStyle (ali [i], 'z-index')), oiMg.Width]); // console.log (arr [i] [2]); } // console.dir (arr); Opre.OnClick = function () {// Left arr.push (arr [0]); arr.shift (); pour (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTAGName ('img') [0]; //console.log(arr commenté startMove (Ali [i], {Left: arr [i] [0], top: arr [i] [1], opacité: 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 (); pour (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTAGName ('img') [0]; startMove (Ali [i], {Left: arr [i] [0], top: arr [i] [1], opacité: arr [i] [2],}); Ali [i] .style.zindex = arr [i] [3]; startmove (oimg, {width: arr [i] [4]}); }}; function getStyle (obj, att) {// Obtenez la valeur de l'unité if (obj.currentStyle) {return obj.currentStyle [att]; } else {return getCompuledStyle (obj, false) [att]; }}}Image de reproduction:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.