使用javascript检查延迟后的下一个输入无线电，然后循环回来

Question

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

在下面的HTML示例中，"slide1"最初被选中，然后我希望在3秒钟后选中"slide2"，然后"slide3"等，循环到最后的"slide"。

有人能帮我吗？非常感谢！

<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);