Javascript 向图像滑块添加淡入淡出效果

我有一个工作图像滑块

var sliderIndex=0；//从第一个图像开始
var autoSlideHandler；//重置
var activeDuration=3000；//每张图片都处于活动状态3秒钟
startImageSlider（）；
函数startImageSlider（）{//初始化滑块
sliderIndex++；
updateImageSlider（）；
autoSlideHandler=setTimeout（startImageSlider，activeDuration）；
}
功能更改幻灯片图像（方向）{//按按钮手动更改图像
滑块索引+=方向；
updateImageSlider（）；
clearTimeout（自动滑动处理程序）；
autoSlideHandler=setTimeout（startImageSlider，activeDuration）；
}
函数updateImageSlider（）{//切换图像
var sliderImages=$（“.sliderImg”）；
对于（变量i=0；isliderImages.length）{
sliderIndex=1；
}
else if（滑块索引<1）{
sliderIndex=sliderImages.length；
}
SliderImage[sliderIndex-1].style.display=“block”//显示下一幅图像
}

#集装箱图像滑块{
宽度：200px；
高度：100px；
位置：相对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（25%）；
}
.幻灯片{
宽度：100%；
身高：100%；
}
.sliderBtn{
宽度：64px；
高度：64px；
最高：50%；
位置：绝对位置；
}
#右滑块{
左：-200px；
/*背景图像：url（“../../Resources/slidemageleft.png”）*/
}
#左滑块{
右：-200px；
/*背景图像：url（“../../Resources/slideImage.png”）*/
}

---

尝试应用以下UpdateImage Slider（）函数：

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
}

函数updateImage Slider（）{//切换图像
var sliderImages=$（“.sliderImg”）；
对于（变量i=0；isliderImages.length）{
sliderIndex=1；
}
else if（滑块索引<1）{
sliderIndex=sliderImages.length；
}
sliderImages[sliderIndex-1].css（'display'，'block'）.fadeIn（）；//显示下一幅图像
}

尝试更改

updateImage Slider（）

函数，如下所示，然后检查

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);
}

函数updateImage Slider（）{//切换图像
var sliderImages=$（“.sliderImg”）；
对于（变量i=0；isliderImages.length）{
sliderIndex=1；
}else if（滑块索引<1）{
sliderIndex=sliderImages.length；
}
setTimeout（函数（）{
$（sliderImages[sliderIndex-1]）.fadeIn（1000）；//显示下一幅图像
}, 1000);
}

---

检查此项以供参考。

您的意思是说

fadeOut

和

fadeIn

同时发生吗？如您所愿。我只希望当前一个淡出，下一个淡入。如果可能的话，创建一个小提琴手，这样可以准确地识别发生了什么！写入

$（sliderImages[slideridex-1]）.css（'display'，'block'）.fadeIn（1000）时没有错误但图像会瞬间滑动。最重要的是没有褪色！当将超时设置为3秒时，它仍会每秒切换，无论您将其设置为
fadeOut
在
setTimeout
上使用它，这意味着它将等待开始显示下一幅图像。啊，现在我明白了！因此，在编写<代码>$（sliderImages[i]）.fadeOut（）时和
设置超时（函数（）{$（sliderImages[sliderIndex-1]）.fadeIn（）；}，500）我需要粘贴什么，使淡出变慢，显示图像的持续时间变长？我希望它淡出/在1000毫秒内，显示的图像应持续3000毫秒