L'exemple de cet article décrit la méthode d'implémentation du changement de diaporama d'image en fondu et en fondu de jquery. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :
$(fonction(){
var _img=$('.slides img');
var _len=_img.length;
var _index=0;
var _moving;
//Insérer le numéro d'index de l'image
var _ul=''
pour(var i=1; i<=_len; i ){
_ul=_ul '- ' je '
';
>
_ul=_ul '
';
$('div.ico').append(_ul);
var _ico=$('.ico li');
//Croisez les chiffres
_ico.mouseover(function(){
_index=_ico.index(this);
_img.filter(':visible').fadeOut(300,function(){
_img.eq(_index).fadeIn(300);
})
$(this).addClass('high').siblings().removeClass('high');
}).eq(0).mouseover();
//Dégradé automatique
_moving=setInterval(autoShow,2000);
_img.hover(function(){clearInterval(_moving)},function(){
_moving=setInterval(autoShow,2000);
})
fonction autoShow(){
_index ;
si(_index==_len) _index=0;
_ico.eq(_index).trigger('mouseover');
};
});
Lors de la prévisualisation de l'effet, une erreur s'affichera dans le coin inférieur gauche et l'effet ne sera pas visible. Vous pouvez voir l'effet après l'avoir actualisé. Bien sûr, en utilisation réelle, un tel problème ne se produira pas.
J'espère que cet article sera utile à la programmation jQuery de chacun.