多个自动淡入/淡出多个div中的循环

Question

我在表中有3列，每列有不同的图片。我试图在不同的时间使用循环中的不同图片进行淡入淡出并自动启动。

我设法让它工作，但我有大约20秒后，我有白色的盒子，而不是图像。

这是https://jsfiddle.net/nmcj4yze/3/上的链接。

我的Jquery代码：

 $(document).ready(function () {
var InfiniteRotator = {
    init: function () {
        //initial fade-in time (in milliseconds)
        var initialFadeIn = 4000;
        //interval between items (in milliseconds)
        var itemInterval = 4000;
        //cross-fade time (in milliseconds)
        var fadeTime = 4000;
        //count number of items
        var numberOfItems = $('.rotating-home').length;
        //set current item
        var currentItem = 0;
        //show first item
        $('.rotating-home').eq(currentItem).fadeIn(initialFadeIn);
        //loop through the items
        var infiniteLoop = setInterval(function () {
            $('.rotating-home').eq(currentItem).fadeOut(fadeTime);
            var rand = Math.floor(Math.random() * (numberOfItems - 1)) + 1;
            currentItem = (currentItem + rand) % numberOfItems;
            $('.rotating-home').eq(currentItem).fadeIn(fadeTime);
        }, itemInterval);
    }
};
InfiniteRotator.init();
});
//]]>

CSS：

body {
color:#999;
font-family:"MS Serif", "New York", serif;
font-size:16px;
padding-left:20px;}
/* slider */
#rotating-item-wrapper {
list-style-type:none;
margin:0;
padding:0;
height: 150px;
}
.rotating-home {
display:;
position: absolute;
}

和Html：

<table width="60%" align="center">
<tr>
    <td>
        <div id="rotating-home-wrapper">
            <div class="rotating-home">
                <img src="http://paul.cerrone.me/wp-content/uploads/2013/06/BQcDAAAAAwoDanBnAAAABC5vdXQKFjlCVTZ6M0RDM3hHN2xTbFRpWUlPQlEAAAACaWQKAXgAAAAEc2l6ZQ.jpg" height="100" width="100" border="0" />
            </div>
            <div class="rotating-home">
                <img src="http://www.dailyfailcenter.com/sites/default/files/fail/ea662e71d267.jpg" class="slide" height="100" width="100" border="0" />
            </div>
    </td>
    <td>
        <div class="rotating-home">
            <img src="http://blog.epromos.com/images/google-dog.jpg" class="slide" height="100" border="0" />
        </div>
        <div class="rotating-home">
            <img src="http://www.thelastnewspaper.com/images-future/gps-dog-tracking-300x400.jpg" class="slide" height="100" border="0" />
        </div>
    </td>
    <td>
        <div class="rotating-home">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHzIZUSCKJBajh8kY8zbVmyYYBCbzgy7ADISw6h9cCJ-Mw2pwnFw" class="slide" height="100" border="0" />
        </div>
        <div class="rotating-home">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWgFW9ZbKPn3_ECEJgV58atYzlbyZzKzvkhgsP3zdt4BFmw_7GfQ" class="slide" height="100" border="0" />
        </div>
    </td>
    </div>
</tr>

更新

对不起，我应该更清楚。起初我想要一个表中的3列。第一个是600x600，第二个是300x600，第三个是300x600。页面加载时，您会看到3张图片。 4秒后，第1列淡入另一张图片而不会出现白色背景。在另外4秒之后，第二列淡入另一张图片，并且在另外4秒后，第3列然后相同。我想连续循环，所以它会重新开始。但我无法做到这一点，我确实通过一个随机周期实现了一些接近但我在大约20秒后有白色背景。不知道我哪里错了

我已经尝试了一切，并且到处寻找。

任何帮助都感激不尽。

谢谢

Answer 1

我假设以下是你想要的：

https://jsfiddle.net/nmcj4yze/7/

你走在正确的轨道上。我清理了一下你的HTML，并删除了一些没有做任何事情的CSS。我也这样做，以便隐藏每个表中的初始图像。

关于javascript，我切换出选择器来迭代每个<td>元素，并让它在其内容上使用jQuery的fadeToggle()函数。鉴于默认情况下隐藏了第一个项目，这将立即切换两个图像的动画。

将您的代码更改为以下内容：

$(document).ready(function () {
    var InfiniteRotator = {
        init: function () {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 4000;
            //interval between items (in milliseconds)
            var itemInterval = 4000;
            //cross-fade time (in milliseconds)
            var fadeTime = 4000;
            //count number of items
            var rotationLimit = $('td').length + 1;
            //set current item
            var currentItem = 0;
            //loop through the items
            var infiniteLoop = setInterval(function () {
                $('td').eq(currentItem).find('.rotating-home').fadeToggle(fadeTime);
                currentItem++;
                if(currentItem == rotationLimit) currentItem = 0;
            }, itemInterval);
        }
    };
    InfiniteRotator.init();
});
//]]>

@charset"utf-8";
 #page {
    height: 100%;
    display: none;
}
body {
    color:#999;
    font-family:"MS Serif", "New York", serif;
    font-size:16px;
    padding-left:20px;
}
.rotating-home {
    position: absolute;
}
.rotating-home:first-of-type {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table width="60%" align="center">
    <tr>
        <td>
            <div class="rotating-home" data-display="0">
                <img src="http://paul.cerrone.me/wp-content/uploads/2013/06/BQcDAAAAAwoDanBnAAAABC5vdXQKFjlCVTZ6M0RDM3hHN2xTbFRpWUlPQlEAAAACaWQKAXgAAAAEc2l6ZQ.jpg" height="100" width="100" border="0" />
            </div>
            <div class="rotating-home" data-display="1">
                <img src="http://www.dailyfailcenter.com/sites/default/files/fail/ea662e71d267.jpg" class="slide" height="100" width="100" border="0" />
            </div>
        </td>
        <td>
            <div class="rotating-home" data-display="2">
                <img src="http://blog.epromos.com/images/google-dog.jpg" class="slide" height="100" border="0" />
            </div>
            <div class="rotating-home" data-display="3">
                <img src="http://www.thelastnewspaper.com/images-future/gps-dog-tracking-300x400.jpg" class="slide" height="100" border="0" />
            </div>
        </td>
        <td>
            <div class="rotating-home" data-display="4">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHzIZUSCKJBajh8kY8zbVmyYYBCbzgy7ADISw6h9cCJ-Mw2pwnFw" class="slide" height="100" border="0" />
            </div>
            <div class="rotating-home" data-display="5">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWgFW9ZbKPn3_ECEJgV58atYzlbyZzKzvkhgsP3zdt4BFmw_7GfQ" class="slide" height="100" border="0" />
            </div>
        </td>
    </tr>
</table>