Javascript 简易自动图像变换器故障

我有一个简单的图像转换器，通过一个非常简单的jQuery在两个图像之间交换，但是由于未知的原因，可能是睡眠不足，我无法让它按需要工作

看看这是怎么回事

这是js； $（文档）.ready（函数（）{

---

谢谢！

这就是你想要做的事情：

$(document).ready(function () {


    function swap() {
        $('#display').fadeToggle(500);
        $('#hidden').fadeToggle(500);

    }


    setInterval(swap, 2000);



});

---

fadeToggle确实是最好的解决方案，但另一个解决方案可能是这样的。 如果您想添加一些额外的逻辑到隐藏和fadein旁边的切换

 function swap() {
    if($("#display").is(":visible"))
    {
         $('#display').hide();
         $('#hidden').fadeIn(500);
    }
    else
    {
         $('#display').fadeIn(500);
         $('#hidden').hide();
    }
 }

---

以下使用稍微不同的方法，使您可以轻松添加两个以上的图像：

HTML

---

您总是隐藏隐藏的id，然后在显示id中淡入淡出，实际上没有进行交换？可能使用一个类并切换其显示？您使用

'display'

将标记的

'id

更改为

'hidden'

，然后在尝试

$（“#hidden”）时

，有两个标签具有相同的

id

。这就是问题的原因。如果在更改

$（'display'）

之前使用临时变量来保存以前的

$（'hidden'）

，应该没有问题。

 function swap() {
    if($("#display").is(":visible"))
    {
         $('#display').hide();
         $('#hidden').fadeIn(500);
    }
    else
    {
         $('#display').fadeIn(500);
         $('#hidden').hide();
    }
 }

<!-- Define a single img element -->
<img src="http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/NiceandSlezzy.png" alt="The Tin Pigeons" title="The Tin Pigeons" id="display">

$(document).ready(function () {
// create an array that contains a entry for each img src. For more images, just add additional array entries. 
var images = ['http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/NiceandSlezzy.png',
              'http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/La-Route-Du-Rock1.jpg'];
    var curImage=images.length-1;
    var $image = $('#display');

    function swap() {
        $image.hide().attr('src', images[curImage]);
        if (curImage==images.length-1) {
            curImage=-1
        }
        curImage++;
        $image.fadeIn(500)
    }

    setInterval(swap, 2000);

});