Rotation d'image en utilisant jQuery mais l'ancrage reste le même

Question

J'ai créé un diaporama d'images avec des légendes en utilisant jQuery. L'image entière et la légende div sont entourées d'une ancre liée. Pour une raison quelconque, même si la fonction de diaporama fonctionne correctement, l'ancre reste la même que la dernière. c'est-à-dire en utilisant l'exemple ci-dessous, le contenu du diaporama ne sera jamais lié à "shows /".

<div id="mainfeature"> 
     <a href="http://www.google.com" class="show feature"> 
     <img src="http://union.ic.ac.uk/arts/mtsoc/wp-content/uploads/2009/07/sweetcharity_front.png" /> 
     <div class="caption"> 
      <span class="tag">2009 Tour Show</span> 
      <span class="title">Sweet Charity</span> 
      <span class="detail">29th July until 8th August</span> 
     </div></a> 
     <a href="shows/" class="feature"> 
     <img src="http://union.ic.ac.uk/arts/mtsoc/wp-content/gallery/2009-forum/Picture%20044.jpg" width="650px" /> 
     <div class="caption"> 
      <span class="tag">2009 Spring Show</span> 
      <span class="title">A Funny Thing Happened on the Way to the Forum</span> 
      <span class="detail"></span> 
     </div></a> 
</div> 

Voir l'exemple de travail à http://union.ic.ac.uk/arts/mtsoc/

Juste pour que vous ne devez pas aller creuser ici est le javascript pour le diaporama:

function slideShow() { 

    //Set the opacity of all images to 0 
    $('#mainfeature a').css({opacity: 0.0}); 

    //Get the first image and display it (set it to full opacity) 
    $('#mainfeature a:first').css({opacity: 1.0}); 

    //Set the caption background to semi-transparent 
    $('#mainfeature .caption').css({opacity: 0.7}); 

    //Call the gallery function to run the slideshow 
    setInterval('main_gallery()',8000); 
} 

function main_gallery() { 

    //if no IMGs have the show class, grab the first image 
    var current = ($('#mainfeature a.show')? $('#mainfeature a.show') : $('#mainfeature a:first')); 

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#mainfeature a:first') :current.next()) : $('#mainfeature a:first'));  

    //Set the fade in effect for the next image, show class has higher z-index 
    next.css({opacity: 0.0}) 
    .addClass('show') 
    .animate({opacity: 1.0}, 1000); 

    //Hide the current image 
    current.animate({opacity: 0.0}, 1000) 
    .removeClass('show'); 

    //Set the opacity to 0 
    $('#mainfeature .caption').animate({opacity: 0.0}, 500);  

    //Animate the caption, opacity to 0.7 
    $('#mainfeature .caption').animate({opacity: 0.7}, 1000); 
} 

Toutes les idées?

Answer 1

Il s'avère que l'index z de l'ancre devait changer lors de la rotation. Je l'ai fait en utilisant la classe show pour que les js n'aient pas à changer.