Un effet de commutation d'image simple implémenté avec HTML + CSS + JS

Comme indiqué sur la figure.

L'effet de commutation d'image est très simple à implémenter et a une bonne compatibilité.

La page HTML est la suivante

La copie de code est la suivante:

<div>

<div id = "focus">

<ul>

<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img / 01.jpg" /> </a> </li>

<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img / 02.jpg" /> </a> </li>

<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img / 03.jpg" /> </a> </li>

<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img / 04.jpg" /> </a> </li>

<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img / 05.jpg" /> </a> </li>

</ul>

</div>

</div> <! - End de wrapper ->

</docy>

style CSS

La copie de code est la suivante:

<style type = "text / css">

* {margin: 0; rembourrage: 0;}

corps {taille de police: 12px; Couleur: # 222; Font-Family: Verdana, Arial, Helvetica, Sans-Serif; Contexte: # f0f0f0;}

.clearFix: après {contenu: "."; Affichage: bloc; hauteur: 0; Clear: les deux; Visibilité: cachée;}

.ClearFix {Zoom: 1;}

ul, li {list-style: aucun;}

IMG {Border: 0;}

.wrapper {width: 800px; marge: 0 auto; Padding-Bottom: 50px;}

/ * qqshop focus * /

#focus {width: 800px; hauteur: 280px; débordement: caché; Position: relative;}

#focus ul {hauteur: 380px; Position: absolue;}

#focus ul li {float: gauche; Largeur: 800px; hauteur: 280px; débordement: caché; Position: relative; Contexte: # 000;}

#focus ul li div {position: absolu; débordement: caché;}

#focus .btnbg {position: absolue; Largeur: 800px; hauteur: 20px; à gauche: 0; en bas: 0; Contexte: # 000;}

#focus .btn {position: absolue; Largeur: 780px; hauteur: 10px; rembourrage: 5px 10px; à droite: 0; en bas: 0; Texte-aligne: à droite;}

#focus .btn span {display: en ligne de bloc; _Display: en ligne; _zoom: 1; Largeur: 25px; hauteur: 10px; _font-size: 0; marge-gauche: 5px; curseur: pointeur; Contexte: #fff;}

#focus .btn span.on {background: #fff;}

#focus .prenext {width: 45px; hauteur: 100px; Position: absolue; En haut: 90px; CONTEXTE: URL (IMG / Sprite.png) sans répétition 0 0; curseur: pointeur;}

#focus .pre {gauche: 0;}

#focus .Next {droite: 0; Position d'arrière-plan: haut droit;}

</ style>

script js

La copie de code est la suivante:

$ (function () {

var swidth = $ ("# focus"). width (); // Obtenez la largeur de la carte de mise au point (zone d'affichage)

var len = $ ("# focus ul li"). longueur; // Obtenez le nombre d'images de mise au point

var index = 0;

var Pimimer;

// Le code suivant ajoute le bouton numérique et la barre translucide derrière le bouton, ainsi que deux boutons sur la page précédente et la page suivante

var btn = "<div class = 'btnbg'> </ div> <div class = 'btn'>";

pour (var i = 0; i <len; i ++) {

btn + = "<span> </span>";

}

btn + = "</ div> <div class = 'prenext pre'> </ div> <div class = 'prenext next'> </div>";

$ ("# focus"). Ajouter (BTN);

$ ("# focus .btnbg"). CSS ("opacité", 0,5);

// Ajoutez une diapositive de souris dans l'événement pour le petit bouton pour afficher le contenu correspondant

$ ("# focus .btn span"). css ("opacité", 0.4) .mouseEnter (function () {

index = $ ("# focus .btn span"). index (this);

showpics (index);

}). Eq (0) .trigger ("MouseEnter");

// Processus de transparence de la page précédente et de la page suivante

$ ("# focus .prenex

$ (this) .stop (true, false) .animate ({"opacité": "0,5"}, 300);

},fonction() {

$ (this) .stop (true, false) .animate ({"opacité": "0,2"}, 300);

});

// bouton de page précédente

$ ("# focus .pre"). Cliquez sur (fonction () {

index - = 1;

if (index == -1) {index = len - 1;}

showpics (index);

});

// bouton de la page suivante

$ ("# focus .Next"). Cliquez sur (fonction () {

index + = 1;

if (index == len) {index = 0;}

showpics (index);

});

// Cet exemple fait défiler à gauche et à droite, c'est-à-dire que tous les éléments Li flottent à gauche dans la même ligne, de sorte que la largeur des éléments UL périphériques doit être calculée ici.

$ ("# focus ul"). css ("largeur", swidth * (len));

// La lecture automatique s'arrête lorsque la souris glisse sur l'image de mise au point et commence lorsque la souris glisse.

$ ("# focus"). hover (function () {

ClearInterval (Piticmer);

},fonction() {

Pimimer = setInterval (function () {

showpics (index);

index ++;

if (index == len) {index = 0;}

}, 4000); // Ce 4000 représente l'intervalle de la lecture automatique, unité: millisecondes

}). Trigger ("Mouseleave");

// Afficher la fonction d'image, afficher le contenu correspondant en fonction de la valeur d'index reçue

fonction showpics (index) {// commutateur ordinaire

var Nowleft = -Index * Swidth; // Calculez la valeur gauche de l'élément UL en fonction de la valeur d'index

$ ("# focus ul"). stop (true, false) .animate ({"Left": Nowleft}, 300); // Faites défiler l'élément UL via Animate () à la position calculée

// $ ("# focus .btn span"). reposovelass ("on"). eq (index) .addclass ("on"); // Passez à l'effet sélectionné pour le bouton actuel

$ ("# focus .btn span"). stop (true, false) .animate ({"opacity": "0,4"}, 300) .eq (index) .stop (true, false) .animate ({"opacity": "1"}, 300); // Passez à l'effet sélectionné pour le bouton actuel

}

});

Images de commutation gauche et droite utilisée