如何自动更改内容

How to automatically make content change?

本文关键字：何自动      更新时间：2023-09-26

我已经创建了这个代码块。它的工作方式是，如果你点击其中一个圆圈，它就会被激活，并显示与圆圈对应的内容。我怎样才能使这个变化自动，例如，每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

将此添加到您的代码中:

jQuery.fn.random = function () {
          var randomIndex = Math.floor(Math.random() * this.length);
          return jQuery(this[randomIndex]);
      };
      setInterval(function () {
          $('.cirle:not(".active")').random().click();
      }, 2000);

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

示例: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
相关文章：