使用Javascript延迟后检查下一个输入广播，然后循环返回

Question

我正在尝试找到最小的方法，以在给定的延迟后自动循环通过输入无线电，​​然后使用js循环回到开头。

在下面的HTML示例中，首先检查'slide1'，然后我希望在3秒钟后检查'slide2'，然后'slide3'等。最后循环回到'slide1'。

有人可以帮我吗？非常感谢！

<div id="slider">
	<div id="slider-content">
		<input checked type="radio" name="slider" id="slide1" autofocus />
		<input type="radio" name="slider" id="slide2" />
		<input type="radio" name="slider" id="slide3" />
		<input type="radio" name="slider" id="slide4" />
		<input type="radio" name="slider" id="slide5" />
		<input type="radio" name="slider" id="slide6" />
		<input type="radio" name="slider" id="slide7" />
		<input type="radio" name="slider" id="slide8" />
		<input type="radio" name="slider" id="slide9" />
		<input type="radio" name="slider" id="slide10" />
		<input type="radio" name="slider" id="slide11" />
		<input type="radio" name="slider" id="slide12" />
		<input type="radio" name="slider" id="slide13" />
		<input type="radio" name="slider" id="slide14" />
		<input type="radio" name="slider" id="slide15" />
		<div id="slides">
			<div class="img1"> </div>
			<div class="img2"> </div>
			<div class="img3"> </div>
			<div class="img4"> </div>
			<div class="img5"> </div>
			<div class="img6"> </div>
			<div class="img7"> </div>
			<div class="img8"> </div>
			<div class="img9"> </div>
			<div class="img10"> </div>
			<div class="img11"> </div>
			<div class="img13"> </div>
			<div class="img14"> </div>
			<div class="img15"> </div>
		</div>
		<div id="controls">
			<label for="slide1"></label>
			<label for="slide2"></label>
			<label for="slide3"></label>
			<label for="slide4"></label>
			<label for="slide5"></label>
			<label for="slide6"></label>
			<label for="slide7"></label>
			<label for="slide8"></label>
			<label for="slide9"></label>
			<label for="slide10"></label>
			<label for="slide11"></label>
			<label for="slide12"></label>
			<label for="slide13"></label>
			<label for="slide14"></label>
			<label for="slide15"></label>
		</div>
		<div id="slide-indicator">
			<div>
				<label for="slide1"></label>
				<label for="slide2"></label>
				<label for="slide3"></label>
				<label for="slide4"></label>
				<label for="slide5"></label>
				<label for="slide6"></label>
				<label for="slide7"></label>
				<label for="slide8"></label>
				<label for="slide9"></label>
				<label for="slide10"></label>
				<label for="slide11"></label>
				<label for="slide12"></label>
				<label for="slide13"></label>
				<label for="slide14"></label>
				<label for="slide15"></label>
			</div>
		</div>
	</div>
</div>

Answer 1

未经测试，但以下应能工作。您需要确保在用户与输入进行交互时此功能停止重复发生。

function checkInputsLoop(start, end, current){
    setTimeout(() => {
        document.getElementById(`slide${current}`).checked = true;
        if (current === end){
            current = start;
        }
        // add logic to stop once user has touched the inputs
        checkInputsLoop(start, end, current);
    }, 3000)
};

checkInputsLoop(1, 15, 1);