Question

我正在尝试使用以下jQuery代码（我知道它没有优化，但我不认为这是问题;尽管可以自由优化）：

$(document).ready(function(){
  var cur = 0;
  function slideshow() {
  $("#imgdisp").fadeOut(400);
  if (cur >= 3) {
    cur = 1;
  } else {
    cur++;
  }
  $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
    $("#imgdisp").fadeIn(400);
    setTimeout(slideshow,4000);
  }
  slideshow();
})

使用以下HTML文件：

<!DOCTYPE html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jscodes/slideshow.js"></script>
<link type="text/css" rel="stylesheet" href="csscodes/slideshow.css">
<div id="imgdisp">
<img height="456px" width="691px" id="img" src="slideshow_home/home_1.jpg">
</div>
</html>

我想要创建的是一个幻灯片，它执行以下操作（按顺序）：

1）淡出当前图像

2）删除当前图像

3）添加一个新图像（称为home_2.jpg，然后上传到home_3.jpg）

4）淡出

5）等待四秒钟，重复下一张图片

但是，当我尝试运行此代码时，它会在淡出之前附加新图像，因此图像会突然显示，淡出，然后淡入，并在重复之前等待四秒钟。我的问题是：

1）如何修复此代码，以便在div淡出时更改图像？

2）有没有办法让图像立即淡入下一张图像？

提前感谢所有贡献的人：）

Answer 1

试试这个：

$(document).ready(function(){
    var cur = 0;
    function slideshow() {
        if (cur >= 3) {
            cur = 1;
        } else {
            cur++;
        }
        $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
        $("#imgdisp").fadeIn(400);
        setTimeout(removeCurrent, 4000);
    }

    function removeCurrent(){
        $("#imgdisp").fadeOut(400);
        slideshow();
    }
    slideshow();
});

Answer 2

您可以使用NivoSlider jQuery插件here

Answer 3

在dunli的顶部，一些修改可以做你想要的 -

$(document).ready(function(){
    var cur = 0;
    function slideshow() {
        if (cur >= 3) {
            cur = 1;
        } else {
            cur++;
        }

        $("#imgdisp").empty().append("<img style='display:none' src='image_path/home_"+cur+".jpg' />");
        $("#imgdisp img").fadeIn(400);
        setTimeout(removeCurrent, 4000);
    }

    function removeCurrent(){
        $("#imgdisp img").fadeOut(400);
        slideshow();
    }
    slideshow();
});

Answer 4

试试这个：

$(document).ready(function(){
        var cur = 1;
        function slideshow() {
            if (cur >= 3) {
                cur = 1;
            } else {
                cur++;
            }
            setTimeout(function(){
                $("#imgdisp").fadeOut(400, function(){
                    $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='img_"+cur+".jpg'>");
                    $("#imgdisp").fadeIn(400);
                });
                slideshow();
            }, 4000);
        }
        slideshow();
    });

如何使用jQuery创建淡入淡出图片幻灯片？

4 个答案: