如何使用jQuery创建渐变图片幻灯片

How do I create a fade picture slideshow with jQuery?

本文关键字：幻灯片 渐变 创建 何使用 jQuery      更新时间：2023-09-26

我有以下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)

5)等待4秒，重复使用下一个图像

但是，当我尝试运行这段代码时，它在淡出之前附加了新图像，因此图像突然出现，淡出，然后淡出，等待四秒钟才重复。我的问题是:

1)我如何修复这段代码，使它改变的图像，而div逐渐消失?

2)是否有一种方法可以让图像立即褪色到下一个图像?

提前感谢所有贡献的人:)

试试这个:

$(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();
});

您可以使用这里提供的NivoSlider和jQuery插件

试试这个:

$(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();
    });

在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();
});
相关文章：