Bucef,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#slides {
position: relative;
height: 300px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: 2;
}
.slide {
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
}
.slide:nth-of-type(1) {
background: red;
}
.slide:nth-of-type(2) {
background: orange;
}
.slide:nth-of-type(3) {
background: green;
}
.slide:nth-of-type(4) {
background: blue;
}
.slide:nth-of-type(5) {
background: purple;
}
</style>
</head>
<body>
<ul id="slides">
<li class="slide showing">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
<li class="slide">Slide 4</li>
<li class="slide">Slide 5</li>
</ul>
<script>
var para = document.getElementById("slides");
var slides = para.querySelectorAll('.slide');
var currentSlide = 0;
var d;
function nextSlide() {
window.clearTimeout(d);
slides[currentSlide].classList.remove("showing");
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].classList.add("showing");
d = window.setTimeout(nextSlide,2000)
}
para.addEventListener("mouseenter", function(event) {
nextSlide()
});
para.addEventListener("mouseleave", function(event) {
window.clearTimeout(d)
});
</script>
</body>
</html>