fadein淡出javascript幻灯片

我正在尝试用javascript创建一个简单的淡入淡出图像幻灯片。我设法创造了一个显示一个图像，淡出，然后淡入另一个图像，但这不是我想要的。我想要的是，当第一个图像淡出时，后面已经有另一个图像，当另一个图像也淡出时，后面也有另一个图像。我在努力避免网页中保存幻灯片的部分在幻灯片放映期间的任何时候都是空的。有人能帮我编辑我的代码或告诉我如何实现这一点吗

var count = 1;
setInterval(function(){
if (count <= 3){
    $("#slideshow").fadeOut(2000);
    setTimeout(function(){$("#slideshow").attr("src","breakup/"+ count +".jpg")},2000);
    $("#slideshow").fadeIn(2000);
    count++;

    if (count>3){
    count = 1
    }
}//end if
}/*end function*/,5000);

var计数=1；
setInterval（函数（）{
如果（计数3）{
计数=1
}
}//如果结束
}/*端功能*/，5000）；

试试这个

基本上，它克隆旧图像并将其覆盖在新图像上，然后同时淡出旧图像和淡出新图像

    //clone the old image
    var ghost = slider.clone();

    //remove id
    ghost.removeAttr('id');

    //make the ghost image just over the old image
    var pos = slider.position();
    ghost.css({
        position: 'absolute',
        top: pos.top,
        left: pos.left
    });
    ghost.insertBefore(slider);

    //$("#slideshow").attr("src","breakup/"+ count+".jpg");

    //change image
    setImage(count);

    //fadeout ghost
    ghost.fadeOut(2000, function () {
        ghost.remove();
        ghost = null;
    });

    //fadein slider
    slider.fadeIn(2000);

---

预加载所有图像可能是最简单的方法

css:

.滑块{
位置：相对位置；
}
img{
位置：绝对位置；
排名：0；
左：0；
}

Javascript:

<script>
var count = 1
setInterval(function(){
  var old= $('#img-' + count);
  old.fadeOut(2000);

  count++;
  if (count>3){
    count = 1
  }

  var next= $('#img-' + count);
  next.fadeIn(2000);
}, 5000);


</script>

变量计数=1
setInterval（函数（）{
var old=$（'img-'+计数）；
《老掉牙》（2000年）；
计数++；
如果（计数>3）{
计数=1
}
var next=$（“#img-”+计数）；
下一篇，fadeIn（2000年）；
}, 5000);

html:

---

我已经创建了这把小提琴，您应该在淡出后设置幻灯片1和幻灯片2的图像，以便在图像淡入前加载图像

function fade(){

    $("#slide2").fadeOut(2000, function() {

        // set new image slide 2

    }).delay(2000).fadeIn(2000, function() {

        // set new image slide 1

    }).delay(2000);

}

setInterval(fade, 8000);

fade();

---

您不能使用1

img

元素来完成此操作，您需要2。。。

<div class="slider">
   <img id="img-1" src="breakup/1.jpg">
   <img id="img-2" src="breakup/2.jpg">
   <img id="img-3" src="breakup/3.jpg">
</div>

function fade(){

    $("#slide2").fadeOut(2000, function() {

        // set new image slide 2

    }).delay(2000).fadeIn(2000, function() {

        // set new image slide 1

    }).delay(2000);

}

setInterval(fade, 8000);

fade();