javascript - How to automatically make content change? -


i have created block of code. works in way if click 1 of cirles, gets activated , content corresponding circle show. how can make change automatically that, example, every 5 seconds circle gets activated corresponding content shown. want make loop never ending.

<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

add code:

jquery.fn.random = function () {           var randomindex = math.floor(math.random() * this.length);           return jquery(this[randomindex]);       };        setinterval(function () {           $('.cirle:not(".active")').random().click();       }, 2000); 

Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -