使用jQuery连续显示/隐藏图像200ms [英] show/hide images continuously 200ms each with jQuery

问题描述

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

我想制作一个无限的透湿膜，连续一个接一个地显示我的图像，持续200ms.我在单击链接时写了这个jQuery脚本:

I want to make an infinite diaporama showing my images successively one by one, for 200ms. I wrote this jQuery script when clicking on the link:

<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>

它不起作用.请帮帮我！

It doesn't work. Please help me!

推荐答案

如果我对您的理解正确，请查看此内容，看看它是否可以解决您的问题: http://jsfiddle.net/GpM76/6/

If i understood you correctly, take a look at this and see if its the solution to your problem: 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张图片的演示. 希望这会有所帮助:)

I used maxImg and imgNum just to show you a demo with 3 images on how to do this. Hope this helps :)

这篇关于使用jQuery连续显示/隐藏图像200ms的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！