Как сделать зациклинную смену картинок js?

Question

YarikLtv4k @YarikLtv4k

Как сделать зациклинную смену картинок js?

Как сделать зациклинную смену картинок js?
HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	
	<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>






	<script src="app.js"></script>
	<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>

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



samoyedTxt.addEventListener("mouseover", ()=>{
	samoyedImg.style.display = 'block'
	labradorImg.style.display = 'none'
	shavkaImg.style.display = 'none'
});
labradorTxt.addEventListener("mouseover", ()=>{
	samoyedImg.style.display = 'none'
	labradorImg.style.display = 'block'
	shavkaImg.style.display = 'none'
});
shavkaTxt.addEventListener("mouseover", ()=>{
	samoyedImg.style.display = 'none'
	labradorImg.style.display = 'none'
	shavkaImg.style.display = 'block'
});

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