Question

我在页面上有一些div，它们随机地无限循环遍历背景（在我的例子中它是bg颜色，但我将在最终产品中使用bg图像）使用JQuery fadein / out和随机函数。

我的问题是，如果循环停留约30秒，您将看到背景不透明度将自身降低到几乎为0，从而产生空白空间。它在IE8中更糟糕，但在Chrome中也是一个问题（仍然需要在IE9和Safari中进行测试）。

任何人都可以解释为什么会发生这种情况，并且（重要的是）如何解决这个问题？

由于

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title> Background image loop</title>

  <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){

    var InfiniteRotator =
    {
        init: function()
        {
            //initial fade-in time (in milliseconds)
            var initialFadeIn = 3000;

            //interval between items (in milliseconds)
            var itemInterval = 1000;

            //cross-fade time (in milliseconds)
            var fadeTime = 2000;

            //count number of items
            var numberOfItems = $('.rotating-item').length;

            //set current item
            var currentItem = 1;

            //show first item
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

            //loop through the items
            var infiniteLoop = setInterval(function(){
                $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            var rand = Math.floor(Math.random()*(numberOfItems-1)) + 1;
            currentItem = (currentItem+rand) % numberOfItems;

            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

            }, itemInterval);
        }
    };

    InfiniteRotator.init();

});
//]]>  

</script>


  <style type='text/css'>
    #rotating-item-wrapper {
    list-style-type:none;
    margin:0;
    padding:0;
    height: 150px;
}  
li{
    float: left;
    width: 148px;
    height: 150px;
    margin: 0 0 0 6px;
    padding: 0;
    position: relative;
}
li div {  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.rotating-item{            
    display: ;
    position: absolute;
    width: 148px;
    height: 150px;
  }
  </style>
</head>
<body>
  <ul id="rotating-item-wrapper">
    <li>
        <div class="rotating-item" style="background-color: red;"></div>
        <div class="rotating-item" style="background-color: blue;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: yellow;"></div>
        <div class="rotating-item" style="background-color: purple;"></div>
        <div class="rotating-item" style="background-color: brown;"></div>
    </li>
    <li>
        <div class="rotating-item" style="background-color: black;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: red;"></div>
        <div class="rotating-item" style="background-color: blue;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: yellow;"></div>
    </li>
    <li>
        <div class="rotating-item" style="background-color: red;"></div>
        <div class="rotating-item" style="background-color: blue;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: yellow;"></div>
        <div class="rotating-item" style="background-color: purple;"></div>
        <div class="rotating-item" style="background-color: brown;"></div>
    </li>
    <li>
        <div class="rotating-item" style="background-color: black;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: red;"></div>
        <div class="rotating-item" style="background-color: blue;"></div>
        <div class="rotating-item" style="background-color: green;"></div>
        <div class="rotating-item" style="background-color: yellow;"></div>
    </li>
</ul>

</body>


</html>

Answer 1

这是因为您的随机数生成可以生成与以前相同的数字。然后你的图像淡出，之后再次淡入。

您必须修改随机数生成以不再允许最后一个数字。

对于计时问题和jQuery，我总是建议使用这个新的插件jquery-timing。使用该插件，您的完整代码（具有固定的随机选择）缩小为：

$.fn.random = function(){ return this.eq(Math.floor(Math.random()*this.length)); } $('.rotating-item').hide().first().fadeIn(initialFadeIn); $('.rotating-item').repeat(itemInterval).fadeOut(fadeTime) .siblings().random().fadeIn(fadeTime).until($);

该插件还有一个similar example in the documentation。

JQuery无限循环 - 不透明度降低到接近0

1 个答案: