javascript - 向图像 slider 添加淡入淡出效果

Question

我有一个工作图像 slider 。

var sliderIndex = 0; // start with the first image
var autoSlideHandler; // for the reset
var activeDuration = 3000; // each picture is active for 3 seconds

startImageSlider();
function startImageSlider() { // Initialize the slider
    sliderIndex++;
    updateImageSlider();
    autoSlideHandler = setTimeout(startImageSlider, activeDuration);
}

function changeSliderImage(direction) { // change images manually by pressing the buttons
    sliderIndex += direction;
    updateImageSlider();
    clearTimeout(autoSlideHandler);
    autoSlideHandler = setTimeout(startImageSlider, activeDuration);
}

function updateImageSlider() { // switch the images
    var sliderImages = $(".sliderImg");

    for (var i = 0; i < sliderImages.length; i++) {
        sliderImages[i].style.display = "none"; // hide the current image
    }
    if (sliderIndex > sliderImages.length) {
        sliderIndex = 1;
    }
    else if (sliderIndex < 1) {
        sliderIndex = sliderImages.length;
    }
    sliderImages[sliderIndex - 1].style.display = "block"; // show the next image
}

#containerImageSlider {
    width: 200px;
    height: 100px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(25%);
}

.sliderImg{
    width: 100%;
    height: 100%;
}

.sliderBtn {
    width: 64px;
    height: 64px;
    top: 50%;
    position: absolute;
}

#sliderBtnRight{
    left: -200px;
    /* background-image: url("../../Resources/slideImageLeft.png"); */
}

#sliderBtnLeft{
    right: -200px;
    /* background-image: url("../../Resources/slideImageRight.png"); */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <div id="containerImageSlider">
            <button class="sliderBtn" id="sliderBtnLeft" onclick="changeSliderImage(1)"></button>
            <img class="sliderImg" src="Resources/SliderImages/sliderImg1.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg2.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg3.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg4.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg5.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg6.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg7.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg8.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg9.jpg">
            <img class="sliderImg" src="Resources/SliderImages/sliderImg10.jpg">
            <button class="sliderBtn" id="sliderBtnRight" onclick="changeSliderImage(-1)"></button>
        </div>

因此，当调用函数 updateImageSlider() 时，我希望当前图像淡出，下一张图像淡入。

示例

$(currentImage).fadeOut(1000, function () {
    // hide the image
});

$(nextImage).fadeIn(1000, function () {
    // show the image
});

但是当尝试将此代码放入我现有的代码中时，它似乎无法正常工作。

我想到了写作

    var currentImage = sliderImages[i];
    $(currentImage).fadeOut(1000, function () {
        currentImage.style.display = "none";
    });

和

var nextImage = sliderImages[sliderIndex - 1];
$(nextImage).fadeIn(1000, function () {
    nextImage.style.display = "block";
});

但这不适合我的代码。当前图像正在淡出，而下一个图像已经在当前容器下方淡入...

Answer 1

尝试如下更改您的 updateImageSlider() 函数并检查，

function updateImageSlider() { // switch the images
  var sliderImages = $(".sliderImg");

  for (var i = 0; i < sliderImages.length; i++) {
    $(sliderImages[i]).fadeOut(1000); // hide the current image
  }
  if (sliderIndex > sliderImages.length) {
    sliderIndex = 1;
  } else if (sliderIndex < 1) {
    sliderIndex = sliderImages.length;
  }

  setTimeout(function() {
    $(sliderImages[sliderIndex - 1]).fadeIn(1000); // show the next image
  }, 1000);
}

检查这个fiddler供引用。