0

我在下面尝试使用以下 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）有没有办法让图像立即褪色到下一张图像？

在此先感谢所有做出贡献的人:)

4

4 回答 4

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();
});
于 2013-01-08T08:17:33.580 回答
1

您可以使用此处NivoSlider提供的jQuery插件

于 2013-01-08T09:11:48.310 回答
0

在 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();
});
于 2013-01-08T09:27:16.407 回答
0

试试这个：

$(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();
    });
于 2013-01-09T00:08:48.867 回答