Javascript Noob：如何通过自动循环主页面链接的现有悬停状态模拟首页上的幻灯片？

Question

嘿大家。希望你能帮助我

在这个网站上工作，我已经完成了我喜欢的所有悬停效果 - 他们正是我想要它们的样子：http://s5ent.brinkster.net/beta3.asp - 尝试将鼠标悬停在四个链接上，在工作中看到一个非常简单的淡入淡出效果，这会降级为没有JavaScript的常规CSS悬停。

我打算做的事情是让页面看起来像是在加载和闲置时进行的幻想幻灯片演示，并且我想通过利用现有的主页面链接的悬停样式/行为来实现该目的使用另一个脚本从头开始创建效果。

要做到这一点我想象我需要一个脚本，模拟在每个链接定期在每个链接上的悬停动作一旦页面加载，从左到右（footcare，草坪&设备，关于我们，与我们联系），无限期地循环所有4个链接（足部护理，草坪&设备，关于我们，联系我们，足部护理，草坪&设备等），但是当它们中的任何一个已被观察者实际上徘徊并且从用户的任何地方在鼠标移出时停止。希望你得到我的漂移...

我也想实现这一点，而不会不必要地中断当前的HTML。所以我想所有事情都必须尽可能通过脚本来完成..

我很新的JavaScript和jQuery。正如你可以在s5ent.brinkster.net/beta3.1-autohover.asp中看到的那样，我做的下面的脚本是错误的：它在所有这些脚本上同时盘旋，并且不再徘徊。当您尝试实际悬停进出每个链接时，链接会重新打开：

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

它只是毛重。除了这个脚本的最后一部分甚至没有在ie中工作的事实。

你能帮我做这件事吗？那真的很好，伙计们。我知道那里有很多可以随时鞭打的泰达天才。或者如果你有一个更好的方式去善待知道。

感谢球员们，希望你们都有希望爆发。

Answer 1

我不会尝试通过手动触发mouseover来模拟悬停状态。不要让脚本导致悬停，请尽量让脚本执行与悬停相同的操作。

您已经有悬停功能如下：相反

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

，举起的是匿名函数，像这样：

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

，然后在旋转脚本，可以也致电onImageHover也有同样的效果。我可以写上面的第2行，只是$(this).hover(onImageCursor)，但我传递的对象作为参考，所以我不必为了在rotate中创建相同的效果而调用apply调用。

除此之外;在您当前的脚本中，每次调用rotate时，它将运行相同的代码，以便所有lilevel1链接。你只是想显示下面的信息，所以你必须使用某种形式的光标，以保持其中的旋转你的轨迹：

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

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

Answer 2

我终于做到了工作。如果你们可以建议我如何提高代码的效率，那么请这样做。非常感谢。这个脚本是在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>