1

こんにちは、私は派手なフォト ギャラリーを作成しようとしています。画像が読み込まれると、それらを表示できるアニメーションがいくつかあります。

問題は、画像の読み込みが速すぎて、効果が同時に発生し、正しく表示されないことです。

そう

それらを配列のキューに入れ、繰り返しスクリプトを取得して一度に1つずつ表示しようとしています。

私は試みをしましたが、うまくいきません。

ここに私がこれまでに行ったことがあります。

<html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" ></script>

<script>

$(document).ready(function() {

   $imagesloader = Array();

   $('.tile img').load(function() {
          $(this).css('display', 'none');
          $imagesloader.push(this);
    });

    setInterval(function(){ 

        if($imagesloader.lenght > 0)
        {
          $($imagesloader[0]).show('slide');
          $imagesloader.shift();

        }
    },500)

});



</script>

<style>

.tile {
background-color: #CCC;
margin: 5px 0px 0px 5px;
position: absolute;
overflow:hidden;
}

.tile img {
  width:100%;
  height:auto;
}

.h1 {height:125px;}
.h2 {height:255px;}

.w1 {width:190px;}
.w2 {width:385px;}

.t1 {top:0px;}
.t2 {top:130px;}
.t3 {top:260px;}
.t4 {top:390px;}

.l1 {left:0px;}
.l2 {left:195px;}
.l3 {left:390px;}
.l4 {left:585px;}



.container {
width: 980px;
background: #999;
height: 1000px;
position:relative;

}
</style>

<body>

    <div class="container">
        <div class="tile w2 h2 t1 l1">
           <img src="Penguins.jpg" />
        </div>
        <div class="tile w1 h1 t1 l3">
           <img  src="Chrysanthemum.jpg" />
        </div>
        <div class="tile w1 h1 t1 l4">
           <img  src="Desert.jpg" />
        </div>
        <div class="tile w2 h2 t2 l3">
             <img  src="Hydrangeas.jpg" />
        </div>
        <div class="tile w1 h1 t3 l1">
             <img  src="Jellyfish.jpg" />
        </div>
        <div class="tile w1 h1 t4 l1">
              <img  src="Koala.jpg" />
        </div>
        <div class="tile w1 h2 t3 l2">
              <img  src="Tulips.jpg" />
        </div>
        <div class="tile w1 h1 t4 l3">
              <img  src="Tulips.jpg" />
        </div>
        <div class="tile w1 h1 t4 l4">
              <img  src="Tulips.jpg" />
        </div>

    </div>


</body>
</html>
4

0 に答える 0