jQuery的運行功能單擊每x秒

Question

我已經jQuery的

以下

<script type="text/javascript"> 
     jQuery(function(){    
      jQuery('.link1').click(function(){ 
       jQuery('.hide-div').hide(); 
       jQuery('.toggle1').show(); 
       jQuery('#arrow').css({top: '0px'}); 
      }); 

      jQuery('.link2').click(function(){ 
       jQuery('.hide-div').hide(); 
       jQuery('.toggle2').show(); 
       jQuery('#arrow').css({top: '42px'}); 
      }); 

      jQuery('.link3').click(function(){ 
       jQuery('.hide-div').hide(); 
       jQuery('.toggle3').show(); 
       jQuery('#arrow').css({top: '84px'}); 
      }); 

      jQuery('.link4').click(function(){ 
       jQuery('.hide-div').hide(); 
       jQuery('.toggle4').show(); 
       jQuery('#arrow').css({top: '125px'}); 
      }); 

      jQuery('.link5').click(function(){ 
       jQuery('.hide-div').hide(); 
       jQuery('.toggle5').show(); 
       jQuery('#arrow').css({top: '166px'}); 
      }); 

      jQuery('.link6').click(function(){ 
       jQuery('.hide-div').hide(); 
       jQuery('.toggle6').show(); 
       jQuery('#arrow').css({top: '207px'}); 
      }); 
     }); 


     jQuery(function(){ 
      jQuery("#toggle-links ul > li > a").click(function(e){ 
       e.preventDefault(); 
      jQuery("#toggle-links ul > li > a").addClass("selected").not(this).removeClass("selected"); 
      }); 
     }); 
    </script> 

而且需要添加將在順序鏈接1運行單擊功能的函數，鏈接2，LINK3 ...每3秒，直到它得到link6然後它將循環回到link1，如果用戶將鼠標懸停在id爲＃的div上，該功能將停止運行，直到出現鼠標。我有點難過這麼做，有什麼想法嗎？

Answer 1

嘗試：

var interval = null; 

jQuery(function(){ 
    interval = setInterval(callFunc, 3000); 
}); 

function callFunc(){ 
    jQuery('.link1, .link2, .link3').trigger('click'); 
} 

任何時候，你可以通過調用停止自動點擊：

clearInterval(interval); 

打電話給他們，以便可以修改你的代碼是這樣的：

 jQuery('.link1').click(function(){ 
      jQuery('.hide-div').hide(); 
      jQuery('.toggle1').show(); 
      jQuery('#arrow').css({top: '0px'}); 

      // click link2 
      jQuery('.link2').trigger('click'); 
     }); 

     jQuery('.link2').click(function(){ 
      jQuery('.hide-div').hide(); 
      jQuery('.toggle2').show(); 
      jQuery('#arrow').css({top: '42px'}); 

      // click link3 
      jQuery('.link3').trigger('click'); 
     }); 

Answer 2

這可能有所幫助：

<script type="text/javascript"> 

    var countClicks = 0; 

    function runClicks(){ 

     if (countClicks >= 6) 
      countClicks = 0; 

     countClick++; 

     jQuery('.link' + countClicks.toString()).click(function(){ 
      jQuery('.hide-div').hide(); 
      jQuery('.toggle' + countClicks.toString()).show(); 
      jQuery('#arrow').css({top: '0px'}); 
     }); 
    } 

    jQuery(function(){ 
     setInterval("runClicks()", 3000); 

     jQuery('#holder').hover(function() { 
       clearInterval("runClicks()", 3000); 
     }); 

     jQuery('#holder').mouseout(function() { 
       setInterval("runClicks()", 3000); 
     }) 
    }); 


</script> 

Answer 3

我認爲這裏最好的選擇是重構代碼，使事情更具編程性，更容易實現，然後使用jQuery插件來完成時序任務。下面是一個使用jQuery Timers Plugin快速啓動的演示。您可能需要修改一下以適應您的需求，但我認爲這大致就是您要找的。

HTML

<div id="links"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    <a href="#">Link 4</a> 
    <a href="#">Link 5</a> 
    <a href="#">Link 6</a> 
</div> 

<div class="toggle">toggle 1</div> 
<div class="toggle">toggle 2</div> 
<div class="toggle">toggle 3</div> 
<div class="toggle">toggle 4</div> 
<div class="toggle">toggle 5</div> 
<div class="toggle">toggle 6</div> 

<div id="arrow">Arrow</div> 

<div id="holder">Pause Box</div> 

的Javascript

<script type="text/javascript"> 
$(document).ready(function() { 
    links = $('#links a');   // Get all the toggling links 
    boxes = $('div.toggle');  // Get all toggle boxes 
    var myTimer = $.timer();  // Instantiate a timer 

    // Bind our processing function to the links 
    links.click(runProcess); 

    // Setup timer 
    myTimer.set({ 
      action : function() { 
       var selectedIndex = (links.filter('.selected').index() + 1) % links.length; 
       links.eq(selectedIndex).trigger('click'); 
      }, 
      time : 3000 
    }).play(); 

    // Bind pause/play to #holder and links so that timer does not run when user hovers 
    // over holder box or links area 
    $('#holder, #links').hover(function(){ myTimer.pause(); }, function() { myTimer.play(); }); 
}); 

// Do stuff when a link is clicked or triggered 
function runProcess(e) 
{ 
    var arrowTopPositions = new Array('0', '42px', '84px', '125px', '166px', '207px'); // Create array of 'top' positions for #arrow 
    var index = $(this).index(); // Get index of this link 
    var arrow = $('#arrow');  // Get #arrow element 

    $(this).addClass("selected").siblings().removeClass("selected"); // Add class to the selected link and remove class from siblings 
    boxes.eq(index).show();           // Show toggle box that has same ordinal index as this link 
    arrow.css('top', arrowTopPositions[ index ]);      // Position arrow using position array and index of this link 
    e.preventDefault();             // ya know, prevent default behavior of link 
} 
</script>