Ich fand eine jquery Bildrotation Skript und das Hinzufügen von Hyperlinks zu den Bildern bricht die Animation

Question

Sie haben diese großen Artikel über jquery für Bild-Swapping mit:

http: // jquery-howto .blogspot.com / 2009/05 / ersetzen-Bilder-at-Zeit-intervals.html

Wie Sie schlage ich Hyperlink die Bilder?

Answer 1

Gelöst es:

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

Erfahren Sie, wie jquery Werke und zu lösen! Oder verwenden Sie ein Plugin wie der Zyklus-Plugin -. Dies erfordert noch einige Kenntnisse über jquery

Answer 3

Nicht getestet, aber es sollte ...

arbeiten

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

Denken Sie daran, was Sie als tag bieten wird die Klasse active so adjsut die CSS als nessecary bekommen.

Wie auch immer, das ist wirklich einfach - ich würde auch tun einige Tutorials oder das Lesen der Dokumentation für jQuery vorschlagen. Sie sollten dieses Skript analysieren können, wie Sie es lesen - es ist ziemlich einfach :-)