圖片滑塊Javascript無法正常運行

Question

我目前正在為公司新主頁使用圖像滑塊，只是無法弄清似乎在javascript部分中的錯誤。該滑塊包含4張圖像，一旦到達最后一張圖像，再次從第一張圖片開始。 問題是圖像以“ 1-2-1-2-3-4-1-2-3-4 ...”的順序顯示

這里的代碼：

  $('.slide').first().addClass('active');

  $('.slide').hide();

  $('.active').show();

  $('#next').on('click', nextSlide);

  $('#prev').on('click', prevSlide);

  // Auto slider
  if (options.autoswitch === true) {
    setInterval(nextSlide, options.autoswitch_speed);
  }

  function nextSlide() {
    $('.active').removeClass('active').addClass('prevActive');    

    if ($('.prevActive').is(':last-child')) {   
      $('.slide').first().addClass('active');
    } else {                   
      $('.prevActive').next().addClass('active');
    }   

    $('.prevActive').removeClass('prevActive');   
    $('.slide').fadeOut(options.speed);        
    $('.active').fadeIn(options.speed);       
  }

  function prevSlide() {
    $('.active').removeClass('active').addClass('prevActive');    

    if ($('.prevActive').is(':first-child')) {    
      $('.slide').last().addClass('active');
    } else {                    
      $('.prevActive').prev().addClass('active');
    }

    $('.prevActive').removeClass('prevActive');   
    $('.slide').fadeOut(options.speed);       
    $('.active').fadeIn(options.speed);           
  }

});

和相應的CSS：

#slider-container {
  height: 600px;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 800px;
}

#sldier {
  height: 100%;
  width: 100%;
}

#slider .slide img {
  height: 100%;
  width: auto;
}

#prev, #next {
  cursor: pointer;
  max-width: 30px;
  opacity: 1;
  position: absolute;
  top: 8%;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  z-index: 999;
}

#prev { left: 12px; }

#next { right: 3px; }

#slider-container:hover #prev, #slider-container:hover #next { opacity: .7; }

.slide {
  position: absolute;
  width: 100%;
}

.slide-copy {
  background: #777;
  background: rgba(0, 0, 0, .5);
  bottom: 0;
  color: #fff;
  left: 0;
  padding: 20px;
  position: absolute;
}   

@media (min-width: 600px) {
    #prev, #next {
        top: 45%;
    }
    }

和HTML

<div id="slider-container">
  <img src="img/arrowprev" id="prev" alt="prev">
  <ul id="slider">
    <li class="slide">
      <div class="slide-copy">
        <h2>Placeholder</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
      <img src="img/placeholder" alt="placeholder">
    </li>
    <li class="slide">
      <div class="slide-copy">
        <h2>Placeholder2</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
      <img src="img/placeholder" alt="placeholder">
    </li>
    <li class="slide">
      <div class="slide-copy">
        <h2>Placeholder3</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
      <img src="img/placeholder" alt="placeholder">
    </li>
        <li class="slide">
      <div class="slide-copy">
        <h2>Placeholder4</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
      </div>
      <img src="img/placeholder" alt="placeholder">
    </li>
  </ul>
  <img src="img/arrownext" id="next" alt="next">     
</div>

也許與它有關

if ($('.prevActive').is(':first-child')) {    
      $('.slide').last().addClass('active');

我只是想不出問題，將不勝感激。 先感謝您 ：）

這是我作為來源的頁面： https : //www.jqueryscript.net/slider/Tiny-jQuery-Image-Slider-Slideshow-With-Caption-Support.html

Answer 1

我發現失敗是不起作用的，這是它無法正常工作的獨特之處，是將可見性應用於每個next / prev操作上的每個prevActive和active元素，因此我在這兩個函數中都添加了以下代碼行：

$('.prevActive').hide();
$('.active').show();

（此外，我已經注釋了引用options變量的行，這在描述中未定義）。

您可以在這里看到小提琴在工作： https : //jsfiddle.net/a4bssrf5/8/