Question

我试图在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);

Answer 1

试试这个http://jsfiddle.net/wfvD6/。

基本上它会克隆旧图像并将其放在新图像上，然后逐渐淡出旧图像并将其淡化。

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

Answer 2

预加载所有图片可能最简单

的CSS：

<style>
    .slider{
       position: relative;
    }

    img {
       position: absolute;
       top:0;
       left:0;
    }
</style>

使用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>

HTML：

<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>

Answer 3

我创建了这个小提琴http://jsfiddle.net/xmLk4/您应该在淡出后设置幻灯片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();

fadein fadeout javascript幻灯片

3 个答案: