淡入淡出javascript幻灯片

fadein fadeout javascript slideshow

本文关键字：幻灯片 javascript 淡出 淡入      更新时间：2023-12-28

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

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

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>

试试这个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);

我已经创建了这个小提琴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();
相关文章：