Как автоматически изменить контент?

Я создал этот блок кода. Он работает таким образом, что если вы нажмете на один из циклов, он активируется и отображается содержимое, соответствующее кругу. Как я могу сделать это изменение автоматически, так что, например, каждые 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

источник

2015-10-02 Thomas Gijsels

Добавьте это в ваш код:

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

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

источник

2015-10-02 23:08:50

Вы можете легко нажать на следующий круг в списке путем определения индекса текущего активного круга, а затем выберите следующий. с помощью оператора% позволяет ему петле навсегда

Пример: 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

источник

2015-10-02 23:11:45

Как автоматически изменить контент?

ответ

Смежные вопросы