Cet article décrit la méthode de JS + CSS pour réaliser l'effet de commutation de diapositive d'image de mise au point décolorisé. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> A JS + CSS FADE-IN FOCUS PATURE Effet de commutation de diapositive </TITAL>
<style>
corps, div, ul, li {marge: 0; rembourrage: 0;}
ul {list-style-type: aucun;}
Body {Background: # 000; Text-Align: Centre; police: 12px / 20px Arial;}
#box {position: relative; largeur: 322px; hauteur: 172px; fond: #ffff; border-radius: 5px; border: 8px solide #ffff; margin: 10px auto;}
#box .List {position: relative; largeur: 320px; hauteur: 240px; débordement: caché; bordure: 1px solide #ccc;}
#box .List li {position: absolu; en haut: 0; gauche: 0; largeur: 320px; hauteur: 240px; opacité: 0; filtre: alpha (opacité = 0);}
#box .List li.current {opacité: 1; filtre: alpha (opacité = 100);}
#box .Count {position: absolu; droit: 0; en bas: 5px;}
#box .Count li {couleur: #ffff; float: gauche; largeur: 20px; hauteur: 20px; curseur: pointeur; margin-droit: 5px; overflow: caché; fond: # f90; opacité: 0,7; filtre: alpha (OPACITY = 70); frontière-rayon: 20px;}
#box .Count li.current {couleur: #fff; opacité: 1; filtre: alpha (opacité = 100); Font-Weight: 700; Background: # f60;}
#tmp {largeur: 100px; hauteur: 100px; fond: rouge; position: absolu;}
</ style>
<script type = "text / javascript">
window.onload = function ()
{
var obox = document.getElementById ("box");
var aul = document.getElementsByTagName ("ul");
var AIMG = aul [0] .getElementsByTagName ("li");
var anum = aul [1] .getElementsByTagName ("li");
var timer = play = null;
var i = index = 0;
// bouton basculer
pour (i = 0; i <anum.length; i ++)
{
anum [i] .index = i;
anum [i] .onMouseOver = function ()
{
show (this.index)
}
}
// La souris glisse et ferme la minuterie
obox.onmouseOver = function ()
{
ClearInterval (Play)
};
// La souris part et commence la lecture automatique
obox.onmouseout = function ()
{
AutoPlay ()
};
// Fonction de jeu automatique
fonction AutoPlay ()
{
play = setInterval (function () {
index ++;
index> = AIMG.Length && (index = 0);
show (index);
}, 2000);
}
AutoPlay (); // L'effet de fondu de commutation d'image de l'application
Fonction Show (a)
{
index = a;
var alpha = 0;
pour (i = 0; i <anum.length; i ++) anum [i] .classname = "";
anum [index] .classname = "current";
ClearInterval (temporisateur);
pour (i = 0; i <amerg.length; i ++)
{
AIMG [i] .Style.opacity = 0;
AIMG [i] .style.filter = "alpha (opacité = 0)";
}
timer = setInterval (function () {
alpha + = 2;
alpha> 100 && (alpha = 100);
AIMG [index] .style.opacity = alpha / 100;
AIMG [index] .style.filter = "alpha (opacity =" + alpha + ")";
Alpha == 100 && ClearInterval (Timer)
}, 20);
}
};
</cript>
</ head>
<body>
<div id = "box">
<ul>
<li> <img src = "/ images / m01.jpg" /> </li>
<li> <img src = "/ images / m02.jpg" /> </li>
<li> <img src = "/ images / m03.jpg" /> </li>
<li> <img src = "/ images / m04.jpg" /> </li>
<li> <img src = "/ images / m05.jpg" /> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.