Question

我对编码非常陌生，几周以来都无法找到解决方案，这很可能是由于我对JavaScript缺乏了解。我有一个自适应图像滑块，它既是自动的，也可以用箭头控制。

我一直试图让它在鼠标悬停（或悬停）时暂停并在鼠标悬停时恢复，但是还没有完全解决。我已经设法通过下面的代码在第一次鼠标悬停和鼠标悬停操作上工作，但是如果再次鼠标悬停它不会暂停；实际上，它完全破坏了时间和顺序。

这让我发疯了，我将不胜感激。我也更愿意在Javascript中专门执行此操作，因为我想学习它并且还没有开始使用JQuery，如果这不太麻烦的话。

html：

<div id="container_main">
  <div class="container_slider" onMouseOver="pauseSlides()" onMouseOut="resumeSlides()">
    <div class="slides style">
      <div class="slide-number">1 / 3</div>
      <img title="carousel04" src="../images/practice/carousel04.jpg" width="100%" alt="" />
      <div class="slide-caption">Caption Text</div>
    </div>
    <div class="slides style">
      <div class="slide-number">2 / 3</div>
      <img title="carousel05" src="../images/practice/carousel05.jpg" width="100%" alt="" />
      <div class="slide-caption">Caption Text</div>
    </div>
    <div class="slides style">
      <div class="slide-number">3 / 3</div>
      <img title="carousel06" src="../images/practice/carousel06.jpg" width="100%" alt="" />
      <div class="slide-caption">Caption Text</div>
    </div>
  </div>
</div>
<table class="arrows">
  <tr>
    <td class="left-arrow" title="previous"><img src="../images/icons/left-arrow.svg" width="20px" onClick="changeSlide(-1)" alt="" /></td>
    <td class="right-arrow" title="next"><img src="../images/icons/right-arrow.svg" width="20px" onClick="changeSlide(1)" alt="" /></td>
  </tr>
</table>

css：

.container_slider {
    width: 90%;
    max-width: 1587px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    float: right;
    display: inline-block;
    overflow: hidden;
    font-family: 'robotoregular', sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.slides{
    display: none;
}

.style {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1800ms;
    animation-name: fade;
    animation-duration: 1800ms;
}

@-webkit-keyframes fade {
    from {opacity: .5} 
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .5} 
    to {opacity: 1}
}

.slide-caption{
    display: none;
    color:#000;
    text-align: center;
    width: 100%;
}

.slide-number{
    display: block;
    font-family: 'robotobold_italic', sans-serif;
    font-size: 12px;
    color: #000000;
    text-align: center;
    margin:0;
    padding:0;
}

table.arrows{
    width: 24%;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 35%;
    margin-right: 35%;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    top:0;
    overflow: visible;
}

.left-arrow {
    display: inline-block;
    margin: 0;
    padding: 0;
    margin-right: 25px;
    cursor: pointer;
}

.right-arrow {
    display: inline-block;
    margin: 0;
    padding: 0;
    margin-left: 25px;
    cursor: pointer;
}

脚本：

<script>
  var slideIndex = 0; //establishes slideIndex variable as equal to 0
  showSlides(); //???
  var slides;

  function pauseSlides() {
    clearTimeout(slideIndex);
  }

  function showSlides() { //establishes showSlides as a function
    var i; //establishes 'i' variable
    slides = document.getElementsByClassName("slides"); //establishes 'slides' variable as equal to the class: "slides"
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1
    }
    slides[slideIndex - 1].style.display = "block";
    setTimeout(showSlides, 5000); // Change image every 5 seconds
  }

  function resumeSlides() {
    setTimeout(showSlides, 5000);
  }

  // Next/previous controls
  function changeSlide(position) {
    slideIndex += position;
    if (slideIndex > slides.length) {
      slideIndex = 1
    } else if (slideIndex < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
      slides[slideIndex - 1].style.display = "block";
    }
  }

  function currentSlide(index) {
    if (index > slides.length) {
      index = 1
    } else if (index < 1) {
      index = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
      slides[index - 1].style.display = "block";
    }
  }
</script>

谢谢您的时间！

Answer 1

这里的问题是slideIndex与活动的时间间隔ID无关。 intervalID是setTimeout给定的ID

intervalId = window.setTimeout( function() { })

您可以使用它来删除间隔

window.clearTimeout(intervalId)

Javascript幻灯片在鼠标悬停时暂停，在鼠标悬停时恢复

1 个答案: