Dieser Artikel beschreibt die Methode von JS+CSS, um den verblassten Fokus -Bild -Schaltungs -Switching -Effekt zu erzielen. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! 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">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> A JS+CSS FADE-IN-FOCUS PICTION PICTION STITY STANDING Effekt </title>
<Styles>
Körper, div, ul, li {Rand: 0; Polster: 0;}
UL {Listenstil-Typ: Keine;}
Körper {Hintergrund:#000; Text-Align: Mitte; Schrift: 12px/20px Arial;}
#Box {Position: relativ; Breite: 322px; Höhe: 172px; Hintergrund: #ffff; Border-Radius: 5px; Grenze: 8px Solid #ffff; Margin: 10px Auto;}
#Box .List {Position: relativ; Breite: 320px; Höhe: 240px; Überlauf: Hidden; Grenze: 1px Solid #ccc;}
#Box .List li {Position: absolut; oben: 0; links: 0; Breite: 320px; Höhe: 240px; Opazität: 0; Filter: Alpha (Opazität = 0);}
#Box .List li.current {opacity: 1; filter: alpha (opacity = 100);}
#Box .count {Position: absolut; rechts: 0; unten: 5px;}
#Box .Count li {color: #ffff; float: links; width: 20px; Höhe: 20px; CurSor: Zeiger; Rand-Rechts: 5px; Überlauf: Hidden; Hintergrund:#f90; Opazität: 0.7; Filter: Alpha (opacity = 70); Border-radius: 20px;};};};};};};};};};};};};};};}
#Box .count li.current {color: #fff; opacity: 1; filter: alpha (opacity = 100); Schriftgewicht: 700; Hintergrund:#f60;}
#tmp {width: 100px; Höhe: 100px; Hintergrund: Rot; Position: absolut;}
</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;
// Schaltfläche umschalten
für (i = 0; i <anum.length; i ++)
{
Anum [i] .Index = i;
anum [i] .onmouseover = function ())
{
Show (this.index)
}
}
// Die Maus wischt sich um und schließt den Timer
obox.onmouseover = Funktion () ()
{
ClearInterval (Spiel)
};
// Die Maus verlässt und beginnt die automatische Wiedergabe
obox.onmouseout = function ())
{
Autoplay ()
};
// Autoplay -Funktion
Funktion autoplay ()
{
play = setInterval (function () {
Index ++;
index> = aimg.length && (index = 0);
Show (Index);
}, 2000);
}
autoplay (); // Anwendungsbildschaltanschaltung Fade -Effekt
Funktionshow (a)
{
index = a;
var alpha = 0;
für (i = 0; i <anum.length; i ++) anum [i] .classname = "";
Anum [Index] .ClassName = "Current";
ClearInterval (Timer);
für (i = 0; i <aimg.length; i ++)
{
AIMG [i] .Style.Opacity = 0;
AIMG [i] .Style.Filter = "Alpha (Opazität = 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);
}
};
</script>
</head>
<body>
<div id = "box">
<ul>
<li> <img src = "/bilder/m01.jpg"/> </li>
<li> <img src = "/bilder/m02.jpg"/> </li>
<li> <img src = "/images/m03.jpg"/> </li>
<li> <img src = "/bilder/m04.jpg"/> </li>
<li> <img src = "/bilder/m05.jpg"/> </li>
</ul>
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.