Как изменить верхнее изображение один раз каждый раз, когда пользователь прокручивает страницу вверх

Question

Я создаю веб-сайт, и одна из функций заключается в изменении отображаемого изображения в разделе каждый раз, когда пользователь выполняет прокрутку назад к этому разделу

Я пытался использовать метод карусели, при котором изображение изменяется один раз при значении прокруткидостигает (допустим) 100. Глюки веб-сайта и изображение меняются несколько раз

Как показано, код должен вызывать изменение изображения только при прохождении пользователем определенной точки.Однако, когда пользователь прокручивает определенную точку, изображение меняется несколько раз и начинает отставать.

var slideTopIndex = 0;
showTopDivs(slideTopIndex);

function plusTopDivs(n) {
  showTopDivs(slideTopIndex += n);
}

function currentTopDiv(n) {
  showTopDivs(slideTopIndex = n);
}

function showTopDivs(n) {
  var i;
  var x = document.getElementsByClassName("myTopSlides");
  var dots = document.getElementsByClassName("dotted");
  if (n > x.length) {
    slideTopIndex = 1
  }
  if (n < 1) {
    slideTopIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  x[slideTopIndex - 1].style.display = "block";
  dots[slideTopIndex - 1].className += " active";
}

showTopSlides();

function showTopSlides() {
  var i;
  var slides = document.getElementsByClassName("myTopSlides");
  var dots = document.getElementsByClassName("dotted");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideTopIndex++;
  if (slideTopIndex > slides.length) {
    slideTopIndex = 1
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideTopIndex - 1].style.display = "block";
  dots[slideTopIndex - 1].className += " active";

  window.onscroll = function() {

    if (window.pageYOffset = 500) {
      setTimeout(showTopSlides, 2000); // Change image every 2 seconds
    }
  }


}

<div class="myTopSlides fade">
  <div class=" vidsection">



    <div class=" video1"></div>
    <div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px;z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
  </div>
</div>

<!-- Slide 2 -->

<div class="myTopSlides fade">
  <div class=" vidsection">


    <div class=" video2"></div>

    <div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px;z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
  </div>
</div>

<!-- Slide 3 -->

<div class="myTopSlides fade">
  <div class=" vidsection">

    <div class=" video3"></div>
    <div class="zt-content zt-center zt-display-center" style="background-color:rgba(0,0,0,0.4); max-width:30%; height:auto; padding:48px; z-index: 2;">The platform that bridges today to tomorrow's learning landscape</div>
  </div>
</div>


<br>

<div style="display:none;">
  <span class="dotted" onclick="currentTopDiv(1)"></span>
  <span class="dotted" onclick="currentTopDiv(2)"></span>
  <span class="dotted" onclick="currentTopDiv(3)"></span>
</div>
</div>