Используя javascript для проверки следующего входного радио после задержки, затем l oop назад

Question

Я пытаюсь найти минимальный способ автоматического циклического обхода входного рад ios после заданной задержки, а затем l oop обратно в начало, используя js.

В приведенном ниже примере HTML сначала проверяется «slide1», затем я хотел бы, чтобы «слайд2» проверялся через 3 секунды, а затем «slide3» и c. возвращаясь к «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);