使用 JQuery 而不是 CSS 的幻灯片动画

Question

我想创建一个图片幻灯片。我从w3schools 中拿了这个例子，因为它正是我想要的，除了不太好的 CSS 动画。 CSS 动画只会淡入看起来不流畅的新元素。我的目标是淡出当前元素并淡入新元素。

这是 w3schools 的示例：https://jsfiddle.net/morpheus0x/9frajqws/2/

我的第一次尝试是使用 jquery fadeIn() 和 fadeOut() 但似乎 display = none 不等待淡入/淡出事件：https://jsfiddle.net/morpheus0x/r4dwoytm/1/

我使用 chk 变量来检查幻灯片更改请求是否来自用户按下按钮。

图片和按钮：

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

javascript：

  var slideIndex = 1;
  var chk = 0;
  showSlides(slideIndex);

  function plusSlides(n) {
    chk = 1;
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    chk = 1;
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      if (chk == 1) {
        $(slides[i]).fadeOut(1000);
        slides[i].style.display = "none";
        chk = 0;
      } else {
        slides[i].style.display = "none";
      }
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    if (chk == 1) {
      $(slides[slideIndex - 1]).fadeIn(1000);
      slides[slideIndex - 1].style.display = "block";
      chk = 0;
    } else {
      slides[slideIndex - 1].style.display = "block";
    }
    dots[slideIndex - 1].className += " active";
  }

我的第二次尝试是使用 jquery animate。这有点工作，但它不会隐藏第一个元素https://jsfiddle.net/morpheus0x/bq85d70o/1/

jsfiddle 第 204 和 216 行

$(slides[i]).animate({display: 'none'});

当我为动画添加速度值时，没有图像显示：

$(slides[i]).animate({display: 'none', 500});

Answer 1

当我稍作更改并在文档加载后使用on click 时，您的代码实际上可以工作。

不使用元素的 onclick 属性。

我不确定为什么在使用 onclick 属性时它不起作用。懒得调试。哈哈哈。

在您的 HTML 中，添加如下所示的类。

<a class="prev slideme" data-point="-1">&#10094;</a>
<a class="next slideme" data-point="1">&#10095;</a>

<div style="text-align:center">
    <span class="dot slideme" data-point="1"></span>
    <span class="dot slideme" data-point="2"></span>
    <span class="dot slideme" data-point="3"></span>
</div>

JAVASCRIPT，添加这个

$(".slideme").on("click",function(){

    var ind = $(this).data("point");

    if($(this).hasClass("dot"))
        showSlides(slideIndex = ind);
    else
        showSlides(slideIndex += ind);
});

ANd JSFiddle 示例：https://jsfiddle.net/synz/gLkm4jho/

我更改了 JSFiddle 示例中的其他代码。添加 fadeIn() 并使用 hide();