Ein einfacher Bildwechseleffekt, der mithilfe von HTML-CSS-JS_Javascript-Kenntnissen implementiert wird

" ;
for(var i=0; i < len; i ) {
btn = ""; ;";
$("#focus").append(btn) ;
$("#focus .btnBg").css("opacity",0.5>//Fügen Sie ein Maus-Slide-In-Ereignis für die kleine Schaltfläche hinzu, um den entsprechenden Inhalt anzuzeigen
$("#focus . btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//Transparenzverarbeitung der Schaltflächen „Vorherige Seite“ und „Nächste Seite“
$("#focus .preNext" ).css( "opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function( ) {
$(this).stop(true,false).animate({"opacity":"0.2"},300);

// Schaltfläche „Vorherige Seite“
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics (index);

//Nächste Seite-Schaltfläche
$("#focus .next").click(function() {
index = 1;
if(index == len) {index = 0;}
showPics(index);

//Dieses Beispiel scrollt nach links und rechts, also alles li-Elemente befinden sich auf derselben Seite. Die Zeile schwebt nach links, daher müssen Sie hier die Breite des umgebenden ul-Elements berechnen
$("#focus ul").css("width",sWidth * (len) );

//Mausbewegung Stoppt die automatische Wiedergabe, wenn das Fokusbild aktiviert ist, und startet die automatische Wiedergabe, wenn es herausgleitet
$("#focus").hover(function() {
clearInterval (picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index ;
if(index == len) {index = 0;}
},4000); //this 4000 Stellt das Intervall der automatischen Wiedergabe dar, Einheit: Millisekunden
}).trigger("mouseleave">//Bildfunktion anzeigen, Zeigen Sie den entsprechenden Inhalt entsprechend dem empfangenen Indexwert an
function showPics(index ) { //Normales Umschalten
var nowLeft = -index*sWidth; //Berechnen Sie den linken Wert des ul-Elements basierend auf dem Indexwert
$("#focus ul").stop(true,false).animate({ "left":nowLeft},300); //Passen Sie das ul-Element an, um durch animate()
zur berechneten Position zu scrollen //$("#focus .btn span").removeClass("on").eq( index).addClass("on"); //Zum ausgewählten Effekt für die aktuelle Schaltfläche wechseln
$("# focus .btn span").stop(true,false).animate({"opacity":" 0.4"},300).eq(index).stop(true,false).animate({"opacity":"1 "},300); //Zum ausgewählten Effekt für die aktuelle Schaltfläche wechseln
}
});


Die verwendeten linken und rechten Schaltbilder