我将如何为此js添加计时器,以便在'x'时间后图像会自动更改.目前,通过带有'rel'属性的'a href'进行更改,但仍需要具有'rel'的功能.
JS:
$(document).ready(function (){
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').css({left:-1476*(parseInt(integer)-1)}).hide().fadeIn(); /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
});
HTML:
<div id="myslide">
<div class="cover">
<div class="mystuff">
<img src="images/header_01.jpg" rel="1"></img>
<img src="images/header_02.jpg" rel="1"></img>
<img src="images/header_03.jpg" rel="1"></img>
</div>
</div>
注意：我已经在这里看到了如何更改计时器上的图像，这与使用按钮相反，但是它并不能满足我的代码风格。
由于我是HTML和JS的新手，所以我仍然不了解所有方面，并对他们在翻译中指的是我编写代码的方式感到有些困惑。
码：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button class="change-image">Change Lights</button>
<script>
var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"]
var buttons = document.getElementsByClassName("change-image")[0];
var index = 0;
buttons.addEventListener('click', function() {
if (index === imageSources.length) {
index = 0;
}
document.getElementById("image").src = imageSources[index];
index++;
});
</script>
</body>
</html>
我需要删除的按钮，有一个上的图像变化定时基础来代替。理想情况下，每2秒一次。
提前致谢。