Остановка слайдера при событии mouseover
Добрый день!
Перепробовал все известные мне варианты для решения проблемы, но решить не удалось. Задача запускать слайдер при наведении курсора, останавливать при покидании. Все сделать кое-как удалось, но при повторном наведении слайды начинают прыгать, а нужно чтобы просто продолжался показ с той же скоростью. Помогите, пожалуйста, с решением. Ссылка на jsfiddle
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var d = 0;
var para = document.getElementById("slides");
para.addEventListener("mouseover", function(event) {
d = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
if (d == 1) {
return true;
} else{
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
};
}
});
para.addEventListener("mouseout", function(event) {
d = 1;
});
<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>
<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>
|
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>
|
рони, Чертов гений!)
Спасибо тебе огромное!!!:victory: |
| Часовой пояс GMT +3, время: 09:07. |