Javascript Noob: Comment émuler un diaporama en première page en parcourant automatiquement les états de survol existants des liens de la page principale?

Question

salut tout le monde. j'espère que vous pourriez m'aider

travaille sur ce site et j'ai fini tous les effets de vol stationnaire que j'aime - ils sont exactement comment je veux qu'ils soient: http://s5ent.brinkster.net/beta3.asp - essayez de planer au-dessus des quatre liens et vous aurez voir un effet de fondu très simple au travail, qui se dégrade en un vol stationnaire régulier sans javascript. Ce que je prévois de faire est de donner à la page l'apparence d'un diaporama de fantaisie en cours de chargement et d'inactivité, et je voulais y parvenir en capitalisant sur le style/comportement de hover existant des liens de la page principale à la place d'utiliser un autre script pour créer l'effet à partir de zéro. Pour ce faire, j'ai imaginé avoir besoin d'un script qui émule une action de survol sur chaque lien à des intervalles de temps réguliers une fois la page chargée, de gauche à droite (footcare, pelouse & équipement, à propos de nous, contactez-nous), en boucle à travers les 4 liens indéfiniment (footcare, pelouse & équipement, à propos de nous, contactez-nous, footcare, pelouse & équipement, etc.) mais fait une pause lorsque l'un d'eux a été plané par un spectateur et reprend où que l'utilisateur laissé éteint lors de la sortie de la souris. J'espère que vous obtenez ma dérive ...

Je veux aussi y parvenir sans perturber inutilement le html actuel. donc je suppose que tout devra être fait en scriptant autant que possible ..

Je suis très nouveau pour javascript et jquery. Comme vous pouvez le voir sur s5ent.brinkster.net/beta3.1-autohover.asp, le script suivant que j'ai fait fonctionne mal: il survole tous les objets en même temps et ne flotte plus. lorsque vous essayez de planer réellement dans et hors de chaque lien le lien vient tout juste sur:

<script type="text/javascript"> 
$(document).ready(function() { 
    var speed = 5000; 
    var run = setInterval('rotate()', speed); 
}); 
function rotate() { 
    $('.lilevel1 a').each(function(i) { 
     $(this).mouseover(); 
    }); 
} 
</script> 

il est tout simplement dégoûtant. Mis à part le fait que ce dernier morceau de script ne fonctionne même pas dans ie.

pouvez-vous s'il vous plaît m'aider à faire de cette chose se produire? ce serait vraiment gentil, les gars. Je sais qu'il y a là des génies de tonsa qui pourraient tout faire en un rien de temps. ou si vous avez une meilleure façon de s'y prendre par tous les moyens aimablement savoir.

merci les gars, j'espère que vous êtes tous eu un souffle.

Answer 1

Je n'essaierais pas d'émuler l'état de la stationnaire en lançant manuellement mouseover. Au lieu de faire planer votre script, essayez de faire en sorte que votre script fasse la même chose que le hover.

Vous avez déjà les éléments suivants pour la fonction de vol stationnaire:

$(this).hover(function(){ ... }); 

Au lieu de cela, soulevez cette fonction anonyme, comme ceci:

function onImageHover(link) { ... } 
$(this).hover(function() { onImageCursor($(this)); }); 

Et puis dans votre script rotate, vous pouvez aussi appel onImageHover pour le même effet. Je pourrais avoir écrit la ligne 2 ci-dessus juste comme $(this).hover(onImageCursor) mais je passe l'objet comme référence, de sorte que je n'ai pas besoin de taper apply appels afin de créer le même effet dans rotate.

Autre que cela; Dans votre script actuel, chaque fois que rotate est appelé, il exécute le même code pour tous les lienslilevel1. Vous voulez juste montrer ce qui suit, vous devez donc utiliser un curseur d'une sorte de garder une trace de l'endroit où la rotation vous:

var rotateCursor = -1; 
var imageCount = 4; 
function rotate() { 
    rotateCursor++; 
    if(rotateCursor >= imageCount) rotateCursor = 0; 

    onImageHover($('.lilevel1 a').eq(rotateCursor)); 
} 

Answer 2

i finalement fait le travail. Si vous pouviez suggérer comment je pourrais améliorer l'efficacité du code, merci de le faire. Merci beaucoup. ce script est au travail à s5ent.com

<script><!-- 
// globally declare hover picker 
var rotateCursor = -1; 
var imageCount = 4; 

$(document).ready(function() { 

    // re-class links 
    $('#li1flnk').attr('id', 'li1fa'); 
    $('#li1tlnk').attr('id', 'li1ta'); 
    $('#li1alnk').attr('id', 'li1aa'); 
    $('#li1clnk').attr('id', 'li1ca'); 

    // add hover class containing hover image to each link 
    $('li.lilevel1 a').append('<span class="hover"><\/span>').each(function() { 

     // hide hover elements from view 
     var $span = $('> span.hover', this).css('display', 'none'); 

     // on hover span 
     $(this).hover(function() { 

      // stop current animation 
      $('.lilevel1 a .hover').each(function() { 
       $(this).stop(false, true).fadeOut('slow'); 
       $(this).parent().css('background-position', 'left top'); 
      }); 
      clearInterval(run); 

      // hover proper 
      $span.stop(false, true).fadeIn('slow'); 
     }, function() { 

      // off hover proper 
      $span.stop(false, true).fadeOut('slow'); 

      // resume animation 
      run = setInterval('rotate()', speed); 
     }); 
    }); 

    // call first animation 
    rotate(); 

    // start animation after first call 
    var speed = 4000; 
    var run = setInterval('rotate()', speed); 
}); 

function rotate() { 

    //initialize cursor 
    rotateCursor++; 
    if (rotateCursor >= imageCount) rotateCursor = 0; 

    // on hover effect 
    $('.lilevel1 a .hover').eq(rotateCursor).fadeIn(500); 
    $('.lilevel1 a').eq(rotateCursor).css('background-position', 'left 22px'); 

    // off hover effect 
    setTimeout("$('.lilevel1 a .hover').eq(rotateCursor).fadeOut(500)", 3000); 
    setTimeout("$('.lilevel1 a').eq(rotateCursor).css('background-position','left top')", 3000); 
} 

//--></script>