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
Post a Comment