多个自动淡入淡出 in/fade 在多个 div 中循环

Question

我在 table 中有 3 列，每列都有不同的图片。我正在尝试在不同的时间使用不同的图片循环淡入淡出并自动开始。

我已经设法让它工作了，但是大约 20 秒后我有白框而不是图像。

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

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

已更新

对不起，我应该更清楚。起初我想要 table 中的 3 列。第一个是 600x600，第二个是 300x600，第三个是 300x600。当页面加载时，您会看到 3 张图片。 4 秒后，第 1 列淡入另一张图片而没有变成白色背景。再过 4 秒后，第 2 列淡入另一张图片，再过 4 秒后，第 3 列也一样。我想处于一个连续的循环中，这样它就会重新开始。但我不能那样做，我确实通过随机循环实现了一些接近的东西，但大约 20 秒后我有白色背景。不确定我哪里错了

我什么都试过了，到处都看了。

任何帮助将不胜感激。

谢谢

Answer 1

我假设以下是您想要的：

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

你走在正确的轨道上。我稍微清理了您的 HTML，并删除了一些没有任何作用的 CSS。我还做到了隐藏每个 table 中的初始图像。

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

多个自动淡入淡出 in/fade 在多个 div 中循环

Multiple Auto fade in/fade out on loop in multiple divs

html

javascript

jquery

fadeout

fadein