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>

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

1 个答案: