我们的网站上有一个事实页面,其中包含以下代码:
<div class='buttonplacer'>
<button class="facts-button1">Fun Fact #1</button>
<button class="facts-button2">Fun Fact #2</button>
<button class="facts-button3">Fun Fact #3</button>
<button class="facts-button4">Fun Fact #4</button>
<button class="facts-button5">Fun Fact #5</button>
<button class="facts-button6">Fun Fact #6</button>
</div>
</div>
<script>
jQuery(".facts-button1").click(function(){
jQuery('#fact-img').attr('src', '/img/backgrounds/fact1-img.png');
jQuery("#fact1").removeClass("hide");
jQuery("#fact-standaard").addClass("hide");
jQuery("#fact2").addClass("hide");
jQuery("#fact3").addClass("hide");
jQuery("#fact4").addClass("hide");
jQuery("#fact5").addClass("hide");
jQuery("#fact6").addClass("hide");
});
jQuery(".facts-button2").click(function(){
jQuery('#fact-img').attr('src', '/img/backgrounds/fact2-img.png');
jQuery("#fact2").removeClass("hide");
jQuery("#fact-standaard").addClass("hide");
jQuery("#fact1").addClass("hide");
jQuery("#fact3").addClass("hide");
jQuery("#fact4").addClass("hide");
jQuery("#fact5").addClass("hide");
jQuery("#fact6").addClass("hide");
});
jQuery(".facts-button3").click(function(){
jQuery('#fact-img').attr('src', '/img/backgrounds/fact3-img.png');
jQuery("#fact3").removeClass("hide");
jQuery("#fact-standaard").addClass("hide");
jQuery("#fact2").addClass("hide");
jQuery("#fact1").addClass("hide");
jQuery("#fact4").addClass("hide");
jQuery("#fact5").addClass("hide");
jQuery("#fact6").addClass("hide");
});
jQuery(".facts-button4").click(function(){
jQuery('#fact-img').attr('src', 'img/backgrounds/fact4-img.png');
jQuery("#fact4").removeClass("hide");
jQuery("#fact-standaard").addClass("hide");
jQuery("#fact2").addClass("hide");
jQuery("#fact3").addClass("hide");
jQuery("#fact1").addClass("hide");
jQuery("#fact5").addClass("hide");
jQuery("#fact6").addClass("hide");
});
jQuery(".facts-button5").click(function(){
jQuery('#fact-img').attr('src', '/img/backgrounds/fact5-img.png');
jQuery("#fact5").removeClass("hide");
jQuery("#fact-standaard").addClass("hide");
jQuery("#fact2").addClass("hide");
jQuery("#fact3").addClass("hide");
jQuery("#fact4").addClass("hide");
jQuery("#fact1").addClass("hide");
jQuery("#fact6").addClass("hide");
});
jQuery(".facts-button6").click(function(){
jQuery('#fact-img').attr('src', '/img/backgrounds/fact6-img.png');
jQuery("#fact6").removeClass("hide");
jQuery("#fact-standaard").addClass("hide");
jQuery("#fact2").addClass("hide");
jQuery("#fact3").addClass("hide");
jQuery("#fact4").addClass("hide");
jQuery("#fact5").addClass("hide");
jQuery("#fact1").addClass("hide");
});
</script>
</div>
<div class="col-md-1"> </div>
<?php $lang_code = icl_object_id(15,'page', true, ICL_LANGUAGE_CODE); ?>
<div id="facts-right" class="col-md-4" >
<div id="fact-standaard">
<?php the_field( "fact_1", $lang_code ); ?></div>
<div id="fact1" class="hide">
<?php the_field( "fact_1", $lang_code); ?>
</div>
<div id="fact2" class="hide">
<?php the_field( "fact_2", $lang_code ); ?>
</div>
<div id="fact3" class="hide">
<?php the_field( "fact_3", $lang_code ); ?>
</div>
<div id="fact4" class="hide">
<?php the_field( "fact_4", $lang_code ); ?>
</div>
<div id="fact5" class="hide">
<?php the_field( "fact_5", $lang_code ); ?>
</div>
<div id="fact6" class="hide">
<?php the_field( "fact_6", $lang_code ); ?>
</div>
我们想做的是让它成为一个定时事件。因此,事实每 5 秒更改一次,但仍然具有现在的点击功能。有谁知道这样做的方法?