Question

我有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">

我想让一个无限的diaporama一个接一个地连续显示我的图像，持续200ms。我在点击链接时编写了这个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>

它不起作用。请帮帮我！

Answer 1

您可以使用jQuery .delay() http://api.jquery.com/delay/

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

Answer 2

如果我理解正确，请查看此问题，看看它是否是您问题的解决方案： http://jsfiddle.net/GpM76/6/

var maxImg = 3;
var imgNum = 2;
function ShowNextImage()
{
    if(imgNum<=maxImg){
    $('#img'+imgNum).show();
            setTimeout(function(){
                $('#img'+imgNum).hide();
                imgNum++;//increase the number (just for this test though)
                ShowNextImage();} ,500);

    }
}

我使用maxImg和imgNum只是为了向您展示一个包含3个图像的演示。希望这会有所帮助：）

Answer 3

您正在设置#img1动画，然后立即隐藏它。动画以异步方式发生。所以当你这样做时：

.animate()
.hide()

hide()将在animate()之后立即运行。如果您想在动画完成后运行一些代码，则需要提供callback：

$("#img1").animate({width: '150px'}, 'slow', function () { //Your code goes here });

同时删除{width: '150px',}中的必要逗号。

如果您想引入延迟，可以使用delay()功能：

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

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

我建议使用setInterval创建一个间隔并循环遍历所有图像。这样你甚至不必使用delay()功能。或者，您可以定义命名函数并以递归方式调用自身。

在你研究了以上所有内容后，你应该能够找到解决方案。

Answer 4

要进行无限循环，可以使用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);

看这里： http://jsfiddle.net/LjTXZ/

使用jQuery连续显示/隐藏图像200ms

4 个答案: