Как сменять картинки по интервалу меняя display = 'none' на 'block'?

Question

[YarikLtv4k]

Как сменять картинки по интервалу меняя display = 'none' на 'block'? По сути простой слайдер
HTML

<div class="wrapper">
			
		<div class="text-content">
			<div class="text-content-center">
				<p id="samoyed">Samoyed</p>
				<p id="labrador">Labrador</p>
				<p id="shavka">Shavka</p>
			</div>
		</div>

		<div class="img-content">

			<div id="img-samoyed" class="dog-img" style="display:block">
				<img src="https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="">
			</div>
			<div id="img-labrador" class="dog-img" style="display:none">
				<img src="https://images.unsplash.com/photo-1529831129093-0fa4866281ee" alt="">
			</div>
			<div id="img-shavka" class="dog-img" style="display:none">
				<img src="https://images.unsplash.com/photo-1608831540955-35094d48694a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=526&q=80" alt="">
			</div>

		</div>

	</div>

JS

const samoyedTxt = document.querySelector('#samoyed')
const labradorTxt = document.querySelector('#labrador')
const shavkaTxt = document.querySelector('#shavka')

const samoyedImg = document.querySelector('#img-samoyed')
const labradorImg = document.querySelector('#img-labrador')
const shavkaImg = document.querySelector('#img-shavka')

const allImg = document.querySelectorAll('.dog-img')

CSS

.wrapper{
    border: 1px solid black;
    display: flex;
    width: 800px;
}
.text-content{
    width: 30%;
}
.text-content-center{
    width: 100px;
    margin: 0 auto;
}
.text-content p {
    text-align: center;
    display: block;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    cursor: pointer;
    padding: 5px;
    transition: .3s;
}

.img-content img{
    height: 300px;
    width: 500px;
    object-fit: cover;
    transition: 1.3s;
}
.dog-img{
    transition: 1.3s;
    height: 299px;
}

Answer 1

[Даниил]

Здравствуйте, вам следует прочитать эту не сложную главу из самоучителя. Функция планирования - setTimeout и setInterval.
Как альтернативу, вы можете использовать готовые слайдеры

Comments

[YarikLtv4k]

как циклом перебрать все картинки и начать заново?

[YarikLtv4k]

я конечно понимаю, что может я фигню написал, но вот
var index = 0

setInterval(()=>{
for( ; allImg < allImg.length ; index++){
allImg[index].style.display = 'block'
if(allImg[0].style.display === 'block'){
allImg[1].style.display = 'none'
allImg[2].style.display = 'none'
} else if (allImg[1].style.display === 'block') {
allImg[0].style.display = 'none'
allImg[2].style.display = 'none'
} else if(allImg[1].style.display === 'block'){
allImg[0].style.display = 'none'
allImg[2].style.display = 'none'
}
}
}, 2000)

Как ни странно, не работает

[Даниил]

Пихаешь все картинки в массив и
for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}
PS: могу ошибаться, на JS давно не писал.
Что-то похожее тут