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

//对于随机点击

＆＃13;

＆＃13;

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);
        
    });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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);
        
    });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;