Ho trovato uno script jQuery rotazione delle immagini e l'aggiunta di collegamenti ipertestuali alle immagini rompe l'animazione

Question

Ho trovato questo grande articolo su utilizzando jQuery per un'immagine scambio:

http: // jquery-howto .blogspot.com / 2009/05 / sostituzione-immagini-a-tempo-intervals.html

Come ti proponi ho collegamento ipertestuale le immagini?

Answer 1

Risolto:

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

Scopri come funziona jQuery e risolvere il problema! Oppure utilizzare un plugin come ad esempio il plugin ciclo -. Questo richiede ancora qualche conoscenza di jQuery

Answer 3

Non testato ma dovrebbe funzionare ...

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);

Basta tenere a mente tutto ciò che fornisci come tag otterrà il active classe in modo adjsut il css come nessecary.

In ogni caso, questo è davvero semplice - Vorrei anche suggerire di fare qualche tutorial o leggere la documentazione per jQuery. Si dovrebbe essere in grado di analizzare questo script come si legge - la sua piuttosto semplice :-)