0

JQueryのフェードイン/アウトとランダム関数を使用して、背景をランダムかつ無限にループするページに多数のdivがあります（私の例では背景色ですが、最終製品では背景画像を使用します）。

私の問題は、ループが約 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 に答える