jQuery从一系列标签中单击随机锚标记

Question

我有五个锚牌。我想做一个循环，在每5秒之后，使用Jquery单击下一个随机标记。应该是无限的。

​

​

这是我的Html代码。

<ul class="nav-tabs-slideshow">
            <li><a href="#panel-1"><strong>Study with umdc</strong><br />
                <span>Study Hard. Play Hard</span>
                </a>
            </li>
            <li>
                <a href="#panel-2"><strong>Messages</strong><br />
                <span>We prepare you to wild world</span>
                </a>
            </li>
            <li>
                <a href="#panel-3"><strong>Vision & Mission</strong><br />
                <span>Discovery &amp; Innovation</span>
                </a>
            </li>
            <li>
                <a href="#panel-4"><strong>Newsroom</strong><br />
                <span>Latest campus news update</span>
                </a>
            </li>
            <li>
                <a href="#panel-5"><strong>Events</strong><br />
                <span>Schedule of our activity</span>
                </a>
            </li>
        </ul>

每一种帮助都会受到感谢。

Answer 1

//用于随机单击

​

jQuery(document).ready(function(e) {
		
		
		
		
		jQuery(document).on({
			mouseenter: function () {
				jQuery('.nav-tabs-slideshow').addClass('mouseenter1');
			},
	
			mouseleave: function () {
				jQuery('.nav-tabs-slideshow').removeClass('mouseenter1');
			}
		}, '.nav-tabs-slideshow');
		
		setInterval(function(){
			
			if(!jQuery('.nav-tabs-slideshow').hasClass('mouseenter1')){
				click1 = Math.floor((Math.random() * jQuery('.nav-tabs-slideshow li').length));			console.log(click1);// for Check
				jQuery('.nav-tabs-slideshow li:eq( '+click1+' ) a').trigger('click');
				jQuery('.nav-tabs-slideshow li:eq( '+click1+' ) a').css({'color':'red'});
			}
				
			
		},1000);
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-tabs-slideshow">
      <li><a href="#panel-1"><strong>Study with umdc</strong><br />
        <span>Study Hard. Play Hard</span> </a> </li>
      <li> <a href="#panel-2"><strong>Messages</strong><br />
        <span>We prepare you to wild world</span> </a> </li>
      <li> <a href="#panel-3"><strong>Vision & Mission</strong><br />
        <span>Discovery &amp; Innovation</span> </a> </li>
      <li> <a href="#panel-4"><strong>Newsroom</strong><br />
        <span>Latest campus news update</span> </a> </li>
      <li> <a href="#panel-5"><strong>Events</strong><br />
        <span>Schedule of our activity</span> </a> </li>
    </ul>

​

​

jQuery(document).ready(function(e) {
		
		var click1 = 0;
		setInterval(function(){
			if(jQuery('.nav-tabs-slideshow li').length == click1)
			{
				click1 = 0;	
			}			
			jQuery('.nav-tabs-slideshow li:eq( '+click1+' ) a').trigger('click');
			jQuery('.nav-tabs-slideshow li:eq( '+click1+' ) a').css({'color':'red'});// this is only for demo
			click1 ++;	
			
		},5000);
        
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-tabs-slideshow">
  <li><a href="#panel-1"><strong>Study with umdc</strong><br />
    <span>Study Hard. Play Hard</span> </a> </li>
  <li> <a href="#panel-2"><strong>Messages</strong><br />
    <span>We prepare you to wild world</span> </a> </li>
  <li> <a href="#panel-3"><strong>Vision & Mission</strong><br />
    <span>Discovery &amp; Innovation</span> </a> </li>
  <li> <a href="#panel-4"><strong>Newsroom</strong><br />
    <span>Latest campus news update</span> </a> </li>
  <li> <a href="#panel-5"><strong>Events</strong><br />
    <span>Schedule of our activity</span> </a> </li>
</ul>

​