我的网站上有滑块。它使用函数和setTimeout保持滑动。我目前正在尝试使我的滑块在鼠标悬停时冻结。但是在slides中添加一个事件侦听器似乎不起作用。什么是可能的最佳解决方案？
//quote slider
let qslideIndex = 0;
let qslides = document.getElementsByClassName("quotemySlides");
let qdots = document.getElementsByClassName("quotedot");
//hiding each image through loop
const qhidenLoop = ()=>{
let j;
for (j = 0; j < qslides.length; j++) {
qslides[j].style.display = "none";
}
}
//running the slide
const qautoslideRun = ()=>{
qslideIndex++;
if (qslideIndex > qslides.length) {
qslideIndex = 1;
}
qhidenLoop();
qslides[qslideIndex-1].style.display = "block";
}
qshowSlides();
//all slide functions running here
function qshowSlides() {
qautoslideRun();
setTimeout(qshowSlides, 10000); // Change image every 10 seconds
}.quoteslideshow-container {
max-width: 40%;
position: relative;
margin: 5% auto 5% auto;
}
.quotemySlides {
display: none;
}
/* Fading + slide in animation */
.slideinfromleft {
animation: slideinfromleft 1.5s ease-in 0s 1 normal forwards;
}
.image {
transition: border, border-radius 1s linear;
}
.image:hover {
border-radius: 20%;
border: 2px solid black
}
@keyframes slideinfromleft {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
opacity: 0.1;
}
50% {
opacity: .5
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
opacity: 1
}
}<body>
<div class="container">
<div class="quote">
<div class="quoteslideshow-container">
<!-- Full-width images with number and caption text -->
<div class="quotemySlides slideinfromleft">
<img class="image" src="img/quote1.png" style="width:100%">
</div>
<div class="quotemySlides slideinfromleft">
<img class="image" src="img/quote2.png" style="width:100%">
</div>
<div class="quotemySlides slideinfromleft">
<img class="image" src="img/quote3.png" style="width:100%">
</div>
<div class="quotemySlides slideinfromleft">
<img class="image" src="img/quote4.png" style="width:100%">
</div>
</div>
<br>
</div>
</div>
<script src="tribute.js" type="text/javascript"></script>
<script src="quotetribute.js" type="text/javascript"></script>
</body>使用一个变量将setTimeout固定在其中，在mouseover幻灯片上清除它，在mouseleave再次调用函数slider()时，我将测试悬停的超时时间更改为3秒。在mouseleave上，我用setTimeout在1秒后调用函数qshowSlides()，你可以在没有setTimeout的情况下调用它，或者增加setTimeout的时间
//quote slider
let qslideIndex = 0;
let qslides = document.getElementsByClassName("quotemySlides");
let qdots = document.getElementsByClassName("quotedot");
let timeoutHolder = null;
//hiding each image through loop
const qhidenLoop = ()=>{
let j;
for (j = 0; j < qslides.length; j++) {
qslides[j].style.display = "none";
}
}
//running the slide
const qautoslideRun = ()=>{
qslideIndex++;
if (qslideIndex > qslides.length) {
qslideIndex = 1;
}
qhidenLoop();
qslides[qslideIndex-1].style.display = "block";
}
qshowSlides();
//all slide functions running here
function qshowSlides() {
qautoslideRun();
timeoutHolder = setTimeout(qshowSlides, 3000); // Change image every 3 seconds for test hover
}
const disableAutoSlideOnHover = () => {
const container = document.querySelector( ".quoteslideshow-container" );
container.addEventListener( "mouseover", function() {
clearTimeout( timeoutHolder );
timeoutHolder = null;
} );
container.addEventListener( "mouseleave", function() {
setTimeout( () => qshowSlides(), 1000 )
} );
}
disableAutoSlideOnHover();.quoteslideshow-container {
max-width: 40%;
position: relative;
margin: 5% auto 5% auto;
}
.quotemySlides {
display: none;
}
/* Fading + slide in animation */
.slideinfromleft {
animation: slideinfromleft 1.5s ease-in 0s 1 normal forwards;
}
.image {
transition: border, border-radius 1s linear;
}
.image:hover {
border-radius: 20%;
border: 2px solid black
}
@keyframes slideinfromleft {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
opacity: 0.1;
}
50% {
opacity: .5
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
opacity: 1
}
}<body>
<div class="container">
<div class="quote">
<div class="quoteslideshow-container">
<!-- Full-width images with number and caption text -->
<div class="quotemySlides slideinfromleft">
<img class="image" src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="width:100%">
</div>
<div class="quotemySlides slideinfromleft">
<img class="image" src="https://images.unsplash.com/photo-1586227740560-8cf2732c1531?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1261&q=80" style="width:100%">
</div>
<div class="quotemySlides slideinfromleft">
<img class="image" src="https://images.unsplash.com/photo-1659944975073-453265ccf3a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="width:100%">
</div>
<div class="quotemySlides slideinfromleft">
<img class="image" src="https://images.unsplash.com/photo-1659830686710-9c6df95f8cf3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80" style="width:100%">
</div>
</div>
<br>
</div>
</div>
<script src="tribute.js" type="text/javascript"></script>
<script src="quotetribute.js" type="text/javascript"></script>
</body>