Wie in der Abbildung gezeigt.
Der Image -Switching -Effekt ist sehr einfach zu implementieren und hat eine gute Kompatibilität.
Die HTML -Seite ist wie folgt
Die Codekopie lautet wie folgt:
<div>
<div id = "focus">
<ul>
<li> <a href = "http://www.lanrentuku.com/" target = "_ leer"> <img src = "img/01.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ leer"> <img src = "img/02.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ leer"> <img src = "img/03.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ leer"> <img src = "img/04.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" target = "_ leer"> <img src = "img/05.jpg"/> </a> </li>
</ul>
</div>
</div> <!-Wrapper End->
</body>
CSS -Stil
Die Codekopie lautet wie folgt:
<style type = "text/css">
* {Margin: 0; Polsterung: 0;}
Körper {Schriftgröße: 12px; Farbe:#222; Schriftfamilie: Verdana, Arial, Helvetica, Sans-Serif; Hintergrund:#f0f0f0;}
.ClearFix: Nach {Inhalt: "."; Anzeige: Block; Höhe: 0; klar: beides; Sichtbarkeit: versteckt;}
.ClearFix {Zoom: 1;}
ul, li {Listenstil: Keine;}
img {Border: 0;}
.Wrapper {Breite: 800px; Rand: 0 Auto; Padding-Bottom: 50px;}
/ * qqShop Focus */
#focus {width: 800px; Höhe: 280px; Überlauf: versteckt; Position: Relativ;}
#focus ul {Höhe: 380px; Position: absolut;}
#focus ul li {float: links; Breite: 800px; Höhe: 280px; Überlauf: versteckt; Position: Relativ; Hintergrund:#000;}
#focus ul li div {Position: absolut; Überlauf: versteckt;}
#focus .BTNBG {Position: Absolute; Breite: 800px; Höhe: 20px; links: 0; unten: 0; Hintergrund:#000;}
#Focus .BTN {Position: absolut; Breite: 780px; Höhe: 10px; Polsterung: 5px 10px; Rechts: 0; unten: 0; Text-Align: Right;}
#focus .BTN span {display: Inline-Block; _Display: Inline; _zoom: 1; Breite: 25px; Höhe: 10px; _font-Größe: 0; Rand-Links: 5px; Cursor: Zeiger; Hintergrund: #fff;}
#focus .BTN span.on {Hintergrund: #fff;}
#focus .Prenext {width: 45px; Höhe: 100px; Position: absolut; Oben: 90px; Hintergrund: URL (IMG/Sprite.png) No-Repeat 0 0; Cursor: Zeiger;}
#focus .pre {links: 0;}
#focus .Next {rechts: 0; Hintergrundposition: rechts oben;}
</style>
JS -Skript
Die Codekopie lautet wie folgt:
$ (function () {
var swidth = $ ("#focus"). width (); // Holen Sie sich die Breite der Fokuskarte (Anzeigebereich)
var len = $ ("#Focus ul li"). Länge; // Erhalten Sie die Anzahl der Fokusbilder
var index = 0;
var pictimer;
// Der folgende Code fügt die numerische Schaltfläche und die durchscheinende Leiste hinter der Schaltfläche sowie zwei Schaltflächen auf der vorherigen Seite und auf der nächsten Seite hinzu
var btn = "<div class = 'btnbg'> </div> <div class = 'btn'>";
für (var i = 0; i <len; i ++) {
btn += "<span> </span>";
}
btn += "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div>";
$ ("#focus"). append (btn);
$ ("#Focus .BTNBG"). CSS ("Opazität", 0,5);
// Fügen Sie für die kleine Taste eine Mausfolie im Ereignis hinzu, um den entsprechenden Inhalt anzuzeigen
$ ("#Focus .btn span").
Index = $ ("#Focus .BTN span"). Index (this);
Showpics (Index);
}). EQ (0) .Tigger ("Mausenter");
// Vorherige Seite und nächste Seite Schaltfläche Transparenzverarbeitung
$ ("#Focus .Prenext"). CSS ("Opazität", 0.2) .hover (function () {
$ (this) .Stop (wahr, falsch) .animate ({"Opazität": "0,5"}, 300);
}, function () {
$ (this) .Stop (wahr, falsch) .animate ({"Opazität": "0,2"}, 300);
});
// Vorherige Seite Schaltfläche
$ ("#Focus .pre"). Click (function () {
Index -= 1;
if (index == -1) {index = len - 1;}
Showpics (Index);
});
// Schaltfläche "nächste Seite"
$ ("#Focus .Next"). Click (function () {
Index += 1;
if (index == len) {index = 0;}
Showpics (Index);
});
// Dieses Beispiel ist nach links und rechts, dh alle Li -Elemente schweben links in derselben Zeile, sodass hier die Breite der peripheren UL -Elemente berechnet werden muss.
$ ("#Focus ul"). CSS ("Breite", Swidth * (len));
// Automatische Wiedergabe stoppt, wenn die Maus auf das Fokusbild gleitet, und beginnt, wenn die Maus herausrutscht.
$ ("#Focus"). Hover (function () {
ClearInterval (Pictimer);
}, function () {
pictimer = setInterval (function () {
Showpics (Index);
Index ++;
if (index == len) {index = 0;}
}, 4000); // Dieser 4000 repräsentiert das Intervall der automatischen Wiedergabe, Einheit: Millisekunden
}). Trigger ("Mouseleave");
// Zeigen Sie die Bildfunktion an und zeigen Sie den entsprechenden Inhalt gemäß dem empfangenen Indexwert an
Funktionshowpics (Index) {// gewöhnlicher Switch
var nowleft = -index*swidth; // Berechnen Sie den linken Wert des UL -Elements basierend auf dem Indexwert
$ ("#Focus ul"). Stop (wahr, falsch) .Animate ({"links": nowleft}, 300); // scrollen Sie das UL -Element durch Animate () in die kalkulierte Position
// $ ("#Focus .btn span"). renoveclass ("on"). EQ (Index) .AddClass ("on"); // Wechseln Sie zum ausgewählten Effekt für die aktuelle Taste
$ ("#Focus .BTN span"). Stop (wahr, falsch) .Arimate ({"Opazität": "0.4"}, 300) .eq (Index) .stop (wahr, falsch) .Arimate ({"Opazität": "1"}, 300); // Wechseln Sie zum ausgewählten Effekt für die aktuelle Taste
}
});
Gebrauchte linke und rechte Schaltbilder