Javascript 使用jQuery连续显示/隐藏图像200毫秒

我有3个图像加载为：

<script type="text/javascript" src="jquery-1.10.2.js"> </script>

<a title="lien de test" id="lien_test" href='#'>Lien de test</a>

<img id="img1" src="images/image1.jpg" alt="image1" style="display:none">
<img id="img2" src="images/image2.jpg" alt="image2" style="display:none">
<img id="img3" src="images/image3.jpg" alt="image3" style="display:none">

我想制作一个无限的底片，一个接一个地显示我的图像，持续200毫秒。我在单击链接时编写了这个jQuery脚本：

<script type="text/javascript">
    $("#lien_test").click(
        function(){
            //alert('bonjour !');

            $("#lien_test").fadeOut();
                            $('#img1').show();
            $('#img1').animate({width : '150px',}, 'slow');
                            $('#img1').hide();

                            $('#img2').show();
            $('#img2').animate({width : '150px',}, 'slow');
                            $('#img2').hide();
        }
        );
</script>

它不起作用。请帮帮我

您可以使用jQuery.delay

---

$foo.slideUp 300.延迟800.fadeIn 400

如果我理解正确，请看一下这一点，看看这是否是解决您问题的方法：

我使用maxImg和imgNum只是向您展示了一个演示，其中有3幅图像介绍了如何做到这一点。 希望这有帮助：

您正在设置img1的动画，然后立即将其隐藏。动画以异步方式进行。因此，当您执行此序列时：

.animate()
.hide()

“隐藏”将在设置动画后立即运行。如果要在动画完成后运行某些代码，则需要提供：

还要删除{width:'150px'，}中不必要的逗号

如果要引入延迟，可以使用以下功能：

$("#img1").animate({width: '150px'}, 'slow').delay(200).animate(...)

显然，如果你想要一个无限循环，你需要以某种方式循环你的代码

我建议通过使用和循环所有图像来创建一个间隔。这样，您甚至不必使用延迟功能。或者，您可以定义一个命名函数并递归地调用它自己

---

学习完以上所有内容后，您应该能够想出一个解决方案。

要进行无限循环，可以使用setInterval函数。您还可以使其更灵活，无需ID

var slideCount = $('#slideshow').children().length;
var currentID = 1;
$('.slides').css('display','none');
$('#slide' + currentID).fadeIn(1000);

setInterval(function(){
    var nextID = currentID + 1;
    if (nextID > slideCount) {
        nextID = 1;
    }
    $('#slide' + currentID).fadeOut(1000);
    $('#slide' + nextID).fadeIn(1000);
    currentID = nextID;
},2000);

看这里：

---

谢谢，它工作得非常好！我刚刚个性化了它来执行我想要的。你是一个JQuery maaster！

$("#img1").animate({width: '150px'}, 'slow').delay(200).animate(...)

var slideCount = $('#slideshow').children().length;
var currentID = 1;
$('.slides').css('display','none');
$('#slide' + currentID).fadeIn(1000);

setInterval(function(){
    var nextID = currentID + 1;
    if (nextID > slideCount) {
        nextID = 1;
    }
    $('#slide' + currentID).fadeOut(1000);
    $('#slide' + nextID).fadeIn(1000);
    currentID = nextID;
},2000);