將漸變效果添加到圖像滑塊

Question

我有一個工作圖像滑塊。

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作爲參考。

Answer 2

嘗試應用下面的updateImageSlider（）函數：

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

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