Maison > interface Web > js tutoriel > le corps du texte

jquery diaporama d'images en fondu clignotant implémentation de commutation method_jquery

WBOY
Libérer: 2016-05-16 16:12:57
original
1243 Les gens l'ont consulté

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 :

Copier le code Le code est le suivant :









$(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.



démo
démo
démo
démo
démo



J'espère que cet article sera utile à la programmation jQuery de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal