Un simple effet de changement d'image implémenté à l'aide des compétences html css js_javascript

Comme le montre l'image.


L'effet de changement d'image est très simple à mettre en œuvre et a une bonne compatibilité.

La page html est la suivante

Copiez le code Le code est le suivant :

/www.lanrentuku.com/ " target="_blank">

• < ;/a>


• 


• 

< ;li>< ;/li>

style CSS

Copier le code Le code est le suivant :

< ;style type="text/css">
* {margin:0; padding:0;}
corps {font-size:12px; 222; font-family:Verdana,Arial,Helvetica ,sans-serif; background:#f0f0f0;}
.clearfix:after {content: "."; display: block height: 0; caché;}
.clearfix {zoom: 1;}
ul,li {list-style:none;}
img {border:0;}

.wrapper {largeur:800px ; margin:0 auto; padding-bottom:50px ;}

/* qqshop focus */
#focus {width:800px height:280px; >#focus ul {hauteur : 380 px ; position : absolue ;}
#focus ul li {float : gauche ; largeur : 800 px ; débordement : caché ; position : relatif ; arrière-plan : #000 ;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus .btnBg {position:absolute; height:20px;
#focus .btn {position : absolu ; largeur : 780 px ; hauteur : 10 px ; remplissage : 5 px 10 px ; bas : 0 ; :inline-block; _display:inline; _zoom: 1; largeur:25px; _font-size:0; curseur:pointeur;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width:45px; position:absolute top:90px; curseur:pointeur;}
#focus . pre {left:0;}
#focus .next {right:0; background-position:right top;}
🎜>
script js

Copier le code

Le code est le suivant :

$(function() {
var sWidth = $("#focus").width(); //Obtenir la largeur de l'image focalisée (zone d'affichage)
var len = $ (" #focus ul li").length; //Obtenir le nombre d'images focus
var index = 0;
var picTimer

//Le code suivant ajoute un bouton numérique et un barre translucide après le bouton, et il y a deux boutons pour la page précédente et la page suivante
var btn = "

" ;
for(var i=0; i < len; i ) {
btn = ""
}
btn = "

";
$("#focus").append(btn) ;
$("#focus .btnBg").css("opacity",0.5);

//Ajouter un événement slide-in de souris pour que le petit bouton affiche le contenu correspondant
$("#focus . btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//Traitement de la transparence des boutons de la page précédente et de la page suivante
$("#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
});

// Bouton de la page précédente
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics (index);
});

//Bouton page suivante
$("#focus .next").click(function() {
index = 1;
if(index == len) {index = 0;}
showPics(index);
}

//Cet exemple défile vers la gauche et la droite, c'est-à-dire tout les éléments li sont sur la même page La ligne flotte vers la gauche, vous devez donc ici calculer la largeur de l'élément ul environnant
$("#focus ul").css("width",sWidth * (len) );

//mouse slide Arrêtez la lecture automatique lorsque l'image mise au point est activée et démarrez la lecture automatique lorsque vous faites glisser
$("#focus").hover(function() {
clearInterval (picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index ;
if(index == len) {index = 0;}
},4000); //this 4000 Représente l'intervalle de lecture automatique, unité : millisecondes
}).trigger("mouseleave");

//Afficher la fonction d'image, afficher le contenu correspondant en fonction de la valeur d'index reçue
function showPics(index ) { //Commutation normale
var nowLeft = -index*sWidth; //Calculer la valeur gauche de l'élément ul en fonction de la valeur d'index
$("#focus ul").stop(true,false).animate({ "left":nowLeft},300); //Ajustez l'élément ul pour faire défiler jusqu'à la position calculée via animate()
//$("#focus .btn span").removeClass("on").eq( index).addClass("on"); //Passer à 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); //Passer à l'effet sélectionné pour le bouton actuel
}
});

Les images de commutation gauche et droite utilisées