0

画像間でフェードするように設定されたコードがいくつかありますが、正しく機能していません。

画像：

 <div id="banner_area">
<img class="active" src= "http://f14.co/automaker-search/assets/images/laptop-Dodge.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Ford.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Honda.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Subaru.png">
</div>

ジャバスクリプト：

<script>
function cycleImages(){
  var $active = $('#banner_area .active');
  var $next = ($('#banner_area .active').next().length > 0) ? $('#banner_area .active').next() : $('#banner_area img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1500,function(){
//fade out the top image
  $active.css('z-index',1).show().removeClass('active');

//reset the z-index and unhide the image
   $next.css('z-index',3).addClass('active');//make the next image the top one
  });
}

$(window).load(function(){
    $('#banner_area').fadeIn(1500);//fade the background back in once all the     images are loaded
      // run every 7s
      setInterval('cycleImages()', 7000);
})</script>

CSS:

#banner_area img { width:714px; height:414px; position:absolute; top:28px; left:55px;top:0;z-index:1}
#banner_area img.active{z-index:3}

それでも、私が得るのは画像の山だけです。http://f14.co/automaker-search/reno/

私は道を外れていると思いますか？私は本当にそれをシンプルにしようとしています。ホバーなし、自動回転のみ。

4

3 に答える 3

0

ページ上のコードに構文エラーがあるようです。cycleImages関数を上記のものに置き換えると、機能し始めるはずです。

余談ですが、間隔を単純setInterval( cycleImages, 7000 )に と書き、現在表示されていない画像を非表示にします (バックグラウンドで「突き出ている」ように見えます)。

于 2013-08-08T23:35:16.567 に答える