Cet exemple a été écrit par moi tout en les étudiant à nouveau. J'espère que cela peut aider tout le monde à apprendre ensemble. L'effet est illustré sur la figure:
Le code HTML ressemble à ceci:
La copie de code est la suivante:
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<adal>
<Title> Création d'outils de navigation d'image </TITAL>
<script type = "text / javascript" src = "js / main.js"> </ script>
<link rel = "Stylesheet" type = "text / css" href = "style / css.css">
</ head>
<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> <! - Ajouter un masque à trois niveaux ->
<img id = "img2" onclick = "" />
<div onClick = "Javascript: jzk.ui.moveiMg (2);"> </div> <! - Ajouter un masque secondaire ->
<img id = "img3" onclick = "" />
<div onclick = "javascript: jzk.ui.moveiMg (1);"> </div> <! - Ajoutez un niveau de masque ->
<img id = "img4" onclick = "" />
<img id = "img5" onclick = "" />
<div onclick = "javascript: jzk.ui.moveiMg (-1);"> </div> <! - Le même effet que mask1 ->
<img id = "img6" onclick = "" />
<div onClick = "JavaScript: jzk.ui.moveiMg (-2);"> </div> <! - Le même effet que mask2 ->
<img id = "img7" onclick = "" />
<div onClick = "JavaScript: jzk.ui.moveiMg (-3);"> </div> <! - Le même effet que mask3 ->
<img src = "images / next.png" onclick = "javascript: jzk.ui.moveiMg (1);" />
</div>
</docy>
</html>
Le code CSS est le suivant:
Le mask1, 2, 3 ... Voici un div couvrant plusieurs photos. L'attribut d'opacité est utilisé pour définir la transparence, qui peut parvenir à un sentiment de brumeté et rendre l'apparence plus belle.
La copie de code est la suivante:
Corps {largeur: 1340px; hauteur: 500px; arrière-plan: URL (../ images / body_bg.gif) sans répétition;}
#pic_browser {largeur: 860px; hauteur: 192px; Position: relative; marge: 130px 106px;}
#PIC_BROWSER IMG {POSITION: Absolute; Border: Aucun;}
.prev {top: 76px; gauche: 0px; }
# img1, .mask3 {largeur: 106px; hauteur: 70px; gauche: 45px; top: 61px; z-index: 4;}
# img2, .mask2 {largeur: 166px; hauteur: 110px; gauche: 95px; en haut: 41px; indice z: 5;}
# img3, .mask1 {largeur: 226px; hauteur: 150px; gauche: 175px; en haut: 21px; z-index: 6;}
# img4 {largeur: 290px; hauteur: 192px; gauche: 285px; en haut: 0px; z-index: 7;}
# img5, .mask5 {largeur: 226px; hauteur: 150px; à droite: 175px; en haut: 21px; z-index: 6;}
# img6, .mask6 {largeur: 166px; hauteur: 110px; à droite: 95px; en haut: 41px; z-index: 5;}
# img7, .mask7 {largeur: 106px; hauteur: 70px; à droite: 45px; en haut: 61px; z-index: 4;}
.Next {en haut: 76px; à droite: 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background: #fff; position: absolu;}
.mask1, .mask5 {opacité: 0,3;}
.mask2, .mask6 {opacité: 0,5;}
.mask3, .mask7 {opacité: 0,7;}
Le code JS est le suivant:
La copie de code est la suivante:
window.onload = function ()
{
JZK.App.Initimg ();
}
var imgArray = new Array ();
imgArray [0] = 'images / 1.jpg';
imgArray [1] = 'images / 2.jpg';
imgArray [2] = 'images / 3.jpg';
imgArray [3] = 'images / 4.jpg';
imgArray [4] = 'images / 5.jpg';
imgArray [5] = 'images / 6.jpg';
imgArray [6] = 'images / 7.jpg';
var base = 0;
var jzk = {}; / * Définir l'espace de noms * /
jzk.tools = {}; / * première couche en couches * /
jzk.ui = {}; / * deuxième couche en couches * /
jzk.ui.moveimg = fonction (offset)
{
base = (offset de base);
pour (var i = base; i <base +7; i ++) / * définir i comme un indice de variable pour le tableau * /
{
var img = document.getElementById ('img' + (i-bases + 1)); / * assurez-vous que la variable IMG est img1, img2, img3 ... jusqu'à IMG7, ces 7 éléments IMG * / /
if (i <0) / * indice du tableau I <0, indiquant le décalage> 0, * /
{
img.src = imgArray [imgArray.length + i];
}
else if (i> imgarray.length-1)
{
img.src = imgArray [i-iMgArray.length];
}
autre
{
img.src = imgArray [i];
}
}
}
jzk.app = {}; / * Troisième couche en couches * /
jzk.app.initimg = function () / * Initialiser l'image d'affichage, c'est-à-dire, appelez le processus de la fonction MoveImg: le paramètre est 7, la base est égale à -7, i est égal à -7, -6, -5, -4, -3, -2, -1, et les éléments correspondants sont img1, img2, ... img7, donc il y a: IMG1 = ImgArray [-7 + 7] img2 = imgArray [-6 + 7] ... * /
{
jzk.ui.moveiMg (7); / * Les paramètres initiaux doivent être définis sur: le nombre d'images qui peuvent être affichées (7 ici); * /
}
Les trois fichiers sont difficiles à comprendre par le code JS. J'ai également donné des commentaires détaillés ci-dessus. Si quelqu'un d'autre peut le lire et ne le comprendre pas, vous pouvez en discuter dans les commentaires ci-dessous.