imhateb,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.banners{
height: 100px;
width: 200px;
border: 4px solid #FF4500;
border-radius: 4px;
margin: 10px;
}
.banners .item{
display: none;
height: 100%;
}
.banners .item.visible{
display: block;
}
.banners .item:nth-child(1){
background-color: #0000FF;
}
.banners .item:nth-child(2){
background-color: #FF0000;
}
.banners .item:nth-child(3){
background-color: #808080;
}
.banners .item:nth-child(4){
background-color: #FFFF00;
}
.banners .item:nth-child(5){
background-color: #FF00FF;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const pause = 1200;
const pauseItem = ({timer}) => clearTimeout(timer);
const showItem = banner => {
pauseItem(banner);
const children = banner.children;
const len = children.length;
let index = [...children].indexOf(banner.querySelector(".visible")|| banner.lastElementChild);
children[index].classList.remove("visible");
index = ++index % len;
children[index].classList.add("visible");
banner.timer = setTimeout(showItem.bind(null, banner), pause);
};
for( const banner of document.querySelectorAll(".banners")) {
banner.addEventListener("mouseleave", showItem.bind(null, banner));
banner.addEventListener("mouseenter", pauseItem.bind(null, banner));
showItem(banner);
};
});
</script>
</head>
<body>
<div class="banners">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
<div class="item">05</div>
</div>
<div class="banners">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
<div class="item">05</div>
</div>
<div class="banners">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
<div class="item">05</div>
</div>
</body>
</html>