我已经创建了这段代码。它的工作方式是，如果您单击其中一个圆圈，它就会被激活并显示与圆圈对应的内容。我怎样才能自动进行此更改，例如，每 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>
最佳答案
将此添加到您的代码中:
jQuery.fn.random = function () {
var randomIndex = Math.floor(Math.random() * this.length);
return jQuery(this[randomIndex]);
};
setInterval(function () {
$('.cirle:not(".active")').random().click();
}, 2000);
关于javascript - 如何自动更改内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32916854/