Question

我创建了这段代码。它的工作方式是，如果单击其中一个圆圈，它将被激活，并显示与圆相对应的内容。如何自动进行此更改，以便例如每隔5秒激活另一个圆圈并显示其相应的内容。我想让这个循环永无止境。

<html>
  <head>
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
     <style>
        #timeline{height:460px;width:3px;background-color:#E6E6E6;position:absolute;left:50%;top:55px;}

        a.cirle{width:15px;height:15px;background-color:#E6E6E6;border-radius:50px;position:absolute;}
        a.cirle:hover{background-color:red;}
        a.cirle.active{background-color:red;}

        .contentquestion1{position:absolute;top:35px;margin-left:-7px;left:50%;}
        .contentquestion2{position:absolute;top:225px;margin-left:-7px;left:50%;}
        .contentquestion3{position:absolute;top:425px;margin-left:-7px;left:50%;}

        #contentanswer {position: absolute;left: 50%;top: 200px;margin-left: 50px;}
        #contentanswer1 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
        #contentanswer2 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
        #contentanswer3 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
     </style>
  </head>
  <body>      
     <div id="timeline"></div>
     <script type='text/javascript'>//<![CDATA[
            $(window).load(function(){
            $('[class^="contentquestion"]').on('click', function(e){
                e.preventDefault();
                var numb = this.className.replace('contentquestion', '');
                $('[id^="contentanswer"]').fadeOut(500);
                $('#contentanswer' + numb).fadeIn(500);
            });
            });//]]> 
     </script>
     <script type='text/javascript'>
            $(function() {
               $('a.cirle').click(function() {
                   $('a.cirle').removeClass('active');
                $(this).addClass('active');
               }).eq(1).addClass('active');
            });
     </script>
     <div class="timeline timeline1">
        <div class="contentquestion1"><a class="cirle" href="#"></a></div>
        <div class="contentquestion2"><a class="cirle" href="#"></a></div>
        <div class="contentquestion3"><a class="cirle" href="#"></a></div>
     </div>   

     <div class="new_member_box_display" id="contentanswer">CONTENT 2</div>
     <div id="contentanswer1">CONTENT 1</div>
     <div id="contentanswer2">CONTENT 2</div>
     <div id="contentanswer3">CONTENT 3</div>
  </body>
</html>

Codepen：http://codepen.io/anon/pen/BoWZgY

Answer 1

将此添加到您的代码中：

jQuery.fn.random = function () {
          var randomIndex = Math.floor(Math.random() * this.length);
          return jQuery(this[randomIndex]);
      };

      setInterval(function () {
          $('.cirle:not(".active")').random().click();
      }, 2000);

Answer 2

您可以通过检测当前活动圈子的索引，然后单击下一个圈子，轻松单击列表中的下一个圈子。使用％运算符允许它永远循环

示例：http://codepen.io/anon/pen/KdWvdJ

setInterval(function(){
  var totalCircles = $("a.cirle").size();
  var currIndex = $("a.cirle.active").index("a.cirle");
  currIndex++;
  $('a.cirle').eq(currIndex % totalCircles).click();
}, 1000); // Adjust the time here 5000 = 5sec

如何自动更改内容？

2 个答案: