J'ai trouvé un script de rotation d'image jquery et en ajoutant des liens hypertextes vers les images casse l'animation

Question

Nous avons trouvé ce grand article sur l'utilisation jquery pour swapping d'image:

http: // jquery-howto .blogspot.com / 2009/05 / remplacement-images-à-temps-intervals.html

Comment proposez-vous que je HYPERLINK les images?

Answer 1

a résolu le problème:

function swapImages() {
    var $active = $('#myGallery a:has(img) > img.active');
    var $next = ($('#myGallery a:has(img.active)').next().find('img').length > 0) ? $('#myGallery a:has(img.active)').next().find('img') : $('#myGallery a:has(img):first > img');
    $active.fadeOut(function() {
        $active.removeClass('active');
        $next.fadeIn().addClass('active');
    });
}

Answer 2

En savoir comment fonctionne jquery et le fixer! Ou utiliser un plugin tel que le plug-in de cycle -. Cela nécessite encore une certaine connaissance de jquery

Answer 3

Non testé, mais il devrait fonctionner ...

function swapImages(tag){
  var element = tag||'img';
  var $active = $('#myGallery '+tag+'.active');
  var $next = ($('#myGallery '+tag+'.active').next().length > 0) ? $('#myGallery '+tag+'.active').next() : $('#myGallery '+tag+':first');
  $active.fadeOut(function(){
    $active.removeClass('active');
    $next.fadeIn().addClass('active');
  });
}

  setInterval(function(){swapImages('a');}, 5000);

  // or the original usage with no links on the images
  setInterval(swapImages, 5000);

Il suffit de garder à l'esprit que vous fournissez comme tag auront la active de classe afin adjsut le css comme nessecary.

Quoi qu'il en soit, c'est vraiment simple - je dirais aussi faire quelques tutoriels ou en lisant la documentation de jQuery. Vous devriez être en mesure d'analyser ce script que vous avez bien lu - son assez simple :-)