0

我在页面上有许多 div，它们使用 JQuery 淡入/淡出和随机函数随机无限循环背景（在我的示例中是 bg 颜色，但我将在最终产品中使用 bg 图像）。

我的问题是，如果循环停留大约 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>
4

1 回答 1

0

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

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

对于时间问题和 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($);

插件的文档中也有类似的例子。

于 2012-08-27T11:14:46.820 回答