<!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() {
var controlledInterval = function(callback, delay) {
var args = [].slice.call(arguments, 2);
var stepsPerLoop = 50,
loopDelay = delay / stepsPerLoop,
counter = 0,
pause = false,
timeout;
timeout = setTimeout(function tik() {
if (!pause) {
counter += loopDelay;
}
if (counter >= delay) {
callback.apply(window, args);
counter = 0;
}
timeout = setTimeout(tik, loopDelay);
}, loopDelay);
return {
pause: function() {
pause = true;
},
resume: function() {
pause = false;
},
destroy: function() {
clearTimeout(timeout);
}
};
};
document.querySelectorAll('.banners').forEach(function(container) {
var items = container.querySelectorAll('.item'),
activeItemIndex = -1;
var showNextItem = function() {
if (items[activeItemIndex]) {
items[activeItemIndex].classList.remove('visible');
}
activeItemIndex = ++activeItemIndex % items.length;
items[activeItemIndex].classList.add('visible');
};
showNextItem();
var interval = controlledInterval(showNextItem, 1000);
container.addEventListener('mouseenter', interval.pause);
container.addEventListener('mouseleave', interval.resume);
});
});
</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>