Este ejemplo fue escrito por mí mientras lo estudiaba de nuevo. Espero que pueda ayudar a todos a aprender juntos. El efecto se muestra en la figura:
El código HTML se ve así:
La copia del código es la siguiente:
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<Evista>
<title> Creación de herramientas de navegación de imágenes </title>
<script type = "text/javaScript" src = "js/main.js"> </script>
<link rel = "stylesheet" type = "text/css" href = "style/css.css">
</ablo>
<Body>
<div id = "pic_browser">
<img src = "images/prev.png" onClick = "javascript: jzk.ui.moveimg (-1);"/>
<img id = "img1" onClick = ""/>
<div onClick = "javaScript: jzk.ui.moveimg (3);"> </div> <!-Agregar máscara de tres niveles->
<img id = "img2" onClick = ""/>
<div onClick = "javaScript: jzk.ui.moveimg (2);"> </div> <!-Agregar máscara secundaria->
<img id = "img3" onClick = ""/>
<div onClick = "javaScript: jzk.ui.moveimg (1);"> </div> <!-Agregue un nivel de máscara->
<img id = "img4" onClick = ""/>
<img id = "img5" onClick = ""/>
<div onClick = "javaScript: jzk.ui.moveimg (-1);"> </div> <!-El mismo efecto que Mask1->
<img id = "img6" onClick = ""/>
<div onClick = "javaScript: jzk.ui.moveimg (-2);"> </div> <!-El mismo efecto que Mask2->
<img id = "img7" onClick = ""/>
<div onClick = "javaScript: jzk.ui.moveimg (-3);"> </div> <!-El mismo efecto que Mask3->
<img src = "imágenes/next.png" onClick = "javascript: jzk.ui.moveimg (1);"/>
</div>
</body>
</html>
El código CSS es el siguiente:
The Mask1, 2, 3 ... Aquí hay un div que cubre varias fotos. El atributo de opacidad se utiliza para definir la transparencia, lo que puede lograr una sensación de bromera y hacer que la apariencia sea más hermosa.
La copia del código es la siguiente:
cuerpo {ancho: 1340px; altura: 500px; fondo: url (../ images/body_bg.gif) no-repeat;}
#pic_browser {ancho: 860px; altura: 192px; Posición: relativo; margen: 130px 106px;}
#pic_browser img {posición: absoluto; border: none;}
.prev {top: 76px; izquierda: 0px; }
#img1, .Mask3 {ancho: 106px; altura: 70px; izquierda: 45px; arriba: 61px; z-índice: 4;}
#img2, .Mask2 {ancho: 166px; altura: 110px; izquierda: 95px; arriba: 41px; z-índice: 5;}
#img3, .Mask1 {ancho: 226px; altura: 150px; izquierda: 175px; arriba: 21px; z-índice: 6;}
#img4 {ancho: 290px; altura: 192px; izquierda: 285px; superior: 0px; z-índice: 7;}
#img5, .Mask5 {ancho: 226px; altura: 150px; derecha: 175px; superior: 21px; z-índice: 6;}
#img6, .Mask6 {ancho: 166px; altura: 110px; derecha: 95px; arriba: 41px; z-índice: 5;}
#img7, .Mask7 {ancho: 106px; altura: 70px; derecha: 45px; arriba: 61px; z-índice: 4;}
.next {top: 76px; derecha: 0px;}
.Mask1, .Mask2, .Mask3, .Mask5, .Mask6, .Mask7 {Background: #fff; Position: Absolute;}
.Mask1, .Mask5 {Opacidad: 0.3;}
.Mask2, .Mask6 {Opacidad: 0.5;}
.Mask3, .Mask7 {Opacidad: 0.7;}
El código JS es el siguiente:
La copia del código es la siguiente:
Window.Onload = function ()
{
jzk.app.initimg ();
}
var imGarray = new Array ();
imGarray [0] = 'imágenes/1.jpg';
imGarray [1] = 'imágenes/2.jpg';
imGarray [2] = 'imágenes/3.jpg';
imGarray [3] = 'imágenes/4.jpg';
imGarray [4] = 'imágenes/5.jpg';
imGarray [5] = 'Images/6.jpg';
imGarray [6] = 'imágenes/7.jpg';
var base = 0;
var jzk = {}; /*Defina el espacio de nombres*/
jzk.tools = {};/*Primera capa*/
jzk.ui = {};/*Segunda capa de capas*/
jzk.ui.moveimg = function (offset)
{
base = (base-offset);
para (var i = base; i <base +7; i ++)/*Definir i como un subíndice variable para la matriz*/
{
var img = document.getElementById ('IMG'+(I-Base+1));/*Asegúrese de que la variable IMG sea IMG1, IMG2, IMG3 ... hasta IMG7, estos 7 Elementos IMG*/
if (i <0) / *subíndice de matriz i <0, indicando compensación> 0, * /
{
img.src = imGarray [imGarray.length+i];
}
else if (i> imGarray.length-1)
{
img.src = imGarray [i-imGarray.length];
}
demás
{
img.src = imGarray [i];
}
}
}
jzk.app = {}; /*Tercera capa en capas*/
jzk.app.initimg = function ()/* Inicializar la imagen de visualización, es decir, llamar al proceso de mude de la función: el parámetro es 7, la base es igual a -7, i es igual a -7, -6, -5, -4, -3, -2, -1, y los elementos correspondientes son img1, img2, ... img7, así que están: img1 = img1s [ --7+7], img2 = imGarray [-6+7] ...*/
{
jzk.ui.moveimg (7);/*Los parámetros iniciales deben establecerse en: el número de imágenes que se pueden mostrar (7 aquí); */
}
Los tres archivos son difíciles de entender mediante el código JS. También he dado comentarios detallados anteriores. Si alguien más puede leerlo y no lo entiende, puede discutirlo en los comentarios a continuación.