Зацикливание слайд-шоу
Чтобы l oop слайд-шоу, вам нужно изменить функцию autoplay на:
- Получить список всех переключателей,
- Определите, какая из них отмечена,
- Снимите отметку и отметьте следующую в списке,
- Уделяя особое внимание переносу на первую один, если уже в конце.
Я переименую функцию next.
function next() {
// get all the radio buttons.
var buttons = $('input[name="radio-button"]');
// look at each one in the list.
for (let i = 0; i < buttons.length; i++) {
// if this one isn't the checked one, move on to the next.
if (!buttons[i].checked) {
continue;
}
// okay, so this one is checked. let's uncheck it.
buttons[i].checked = false;
// was this one at the end of the list?
if (i == buttons.length - 1) {
// if so, the new checked one should be the first one.
buttons[0].checked = true;
} else {
// otherwise, just the new checked one is the next in the list.
buttons[i + 1].checked = true;
}
// now that we've made that change, we can break out of the loop.
break;
}
}
В качестве бонуса вы можете легко сделать аналогичная функция называется от prev до go в обратном направлении.
Остановка слайд-шоу
Когда вы нажимаете переключатель вручную, показ слайдов должен прекратиться. Чтобы остановить слайд-шоу, вам нужно очистить уже установленный интервал.
Функция .setInterval() возвращает «идентификатор интервала». Этот идентификатор может быть использован для внесения изменений в интервал позже - например, его остановка.
var timer = setInterval(next, 3000);
Затем, позже, вы захотите передать это значение timer обратно в clearInterval для остановки таймера.
clearInterval(timer);
Было бы проще разделить это на две функции, start и stop, и пусть значение timer будет глобальным:
var timer;
function start() {
timer = setInterval(next, 3000);
}
function stop() {
clearInterval(timer);
}
Теперь вы можете вызывать функцию stop всякий раз, когда любая из переключателей получает событие click:
$('input[name="radio-button"]').on('click', stop);
Полный пример
Это ваш код с модификациями, описанными выше.
Я добавил кнопки «Пуск», «Стоп», «Предыдущая» и «Далее» - они не нужны для функция. Они просто для демонстрационных целей.
$(document).ready(function() {
/* the list of buttons is not dynamic, so rather than fetching the list of
* buttons every time `next` or `prev` gets executed, we can just fetch it
* once and store it globally. */
var buttons = $('input[name="radio-button"]');
var timer;
function start() {
timer = setInterval(next, 3000);
}
function stop() {
clearInterval(timer);
}
function next() {
for (let i = 0; i < buttons.length; i++) {
if (!buttons[i].checked) {
continue;
}
buttons[i].checked = false;
if (i == buttons.length - 1) {
buttons[0].checked = true;
} else {
buttons[i + 1].checked = true;
}
break;
}
}
function prev() {
for (let i = 0; i < buttons.length; i++) {
if (!buttons[i].checked) {
continue;
}
buttons[i].checked = false;
if (i == 0) {
buttons[buttons.length - 1].checked = true;
} else {
buttons[i - 1].checked = true;
}
break;
}
}
start();
buttons.on('click', stop);
/* these next lines are unnecessary if you aren't including the buttons */
$('#start').on('click', start);
$('#stop').on('click', stop);
$('#next').on('click', next);
$('#prev').on('click', prev);
});
body {
margin: 0;
padding: 0;
}
.slider {
width: 300%;
transition: margin 1s;
height: 100px;
}
#radio-button1:checked~.slider {
margin-left: 0%;
}
#radio-button2:checked~.slider {
margin-left: -100%;
}
#radio-button3:checked~.slider {
margin-left: -200%;
}
.slider-item {
float: left;
width: 33.33%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="radio" name="radio-button" id="radio-button1" checked />
<input type="radio" name="radio-button" id="radio-button2" />
<input type="radio" name="radio-button" id="radio-button3" />
<div class="slider">
<div class="slider-item" style="background: #F00"></div>
<div class="slider-item" style="background: #0F0"></div>
<div class="slider-item" style="background: #00F"></div>
</div>
<!-- these buttons are unnecessary, they are only for demonstration purposes -->
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="prev">Prev</button>
<button id="next">Next</button>