1

背景画像が次々とフェードアウトする Web サイトに取り組んでいます。設定して約 98% 動作しています。1 つだけ小さな問題があります。最初にロードして最初にフェードすると、次の画像に直接フェードするのではなく、白にフェードしてから画像にフェードします。その後、美しく機能します。これは jQuery 1.9 を使用しており、以前の開発者が MooTools を使用してサイト メニューをコーディングしたため、jQuery noConflict をオンにしています。

<html>
<head>
  <script src="js/jquery.js">
  </script>
  <script>
var $s = jQuery.noConflict();

function swapImages(){
  var $sactive = $s('#myGallery .active');
  var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');

  $snext.fadeIn(1500).addClass('active');
  $sactive.fadeOut(2000, function(){
  });
  $sactive.removeClass('active');
};

$s(document).ready(function(){
  // Run our swapImages() function every 5secs
  setInterval('swapImages()', 5000);

});
</script>
</head>
<style>

 #myGallery{
   position:relative;
   width:100%; /* Set your image width */
   height:auto; /* Set your image height */
 }

 #myGallery img{
   display:none;
   position:absolute;
   top:0;
   width: 100%;
   left:0;
 }

 #myGallery img.active{
   display:block;
 }

 .home-page-rotator{
   position:absolute;
   width:100%;
   z-index:-10;
 }
</style>
<body>
<div class="home-page-rotator" id="myGallery">
 <img src="images/1.jpg" class="active" />
 <img src="images/2.jpg" />
 <img src="images/3.jpg" />
</div>
</body>
</html>

必要に応じてテストできるように、すべてのコンテンツを取り出しましたが、背景の回転とフェードを実行するのはすべてです。また、別のファイルに CSS がありますが、ここに投稿するためにインラインに配置したので、コードの背後にある CSS を確認できます。これを修正するにはどうすればよいか教えてください。

4

2 に答える 2

0

しばらく前にこの問題に遭遇しましたが、最も簡単な解決策は、img要素から2つのdivとbackground-imagecssurlを使用して画像を表示するように切り替えることでした。しばらく前に簡単なスライダーを作りました。必要なものは何でもコピーできます。

背景スライダーソース

基本的に、背景要素として絶対的に配置されている2つのdivがある場合は、それらのzインデックスを循環させ、フェードインおよびフェードアウトすることができます。さらに、構築されたimg要素に次の画像をロードし、ロードしたら、非表示のdivのbackground-imageを変更してフェードインすることができます。これは、読み込みが表示されておらず、スライドショーに直接フェードインできることを意味します。

以下にいくつかの擬似コードを示しますが、ソース内の実際の関数を確認する方がおそらく簡単です。

base.next_slide = function () {
    "current slide" = "next slide";
    base.containers[the_shown_container].fadeOut(duration,function () {
      $(this).css({'background-image':'url("' + "Next image url" + '")',
                   "z-index":"-2"});
      base.containers[the_next_container].css("z-index","-1");
      $(this).show();
      the_shown_container = the_next_container;
    });
  };

Plugin.prototype.init = function (base) {
  $('<img/>').attr('src', "Next image url").load(function() {
    base.containers[the_next_container].css('background-image', 'url(' + "Next image url" + ')');
    if ("there's only one image in the slider"){
      base.containers[the_shown_container].fadeOut(duration,function () {
        $(this).css("z-index","-2");
        base.containers[the_next_container].css("z-index","-1");
      });
      return;
    }
    base.next_slide();
    setInterval(base.next_slide ,base.o.interval);
  });
};
于 2013-03-12T18:36:59.113 に答える
0

remove class メソッドをフェードアウトの関数呼び出しに移動すると、私にとってはうまくいくようです (少なくとも Chrome では):

<script>
    var $s = jQuery.noConflict();

    function swapImages(){
      var $sactive = $s('#myGallery .active');
      var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first');

      $sactive.fadeOut(2000, function(){
          $sactive.removeClass('active');
      });
      $snext.fadeIn(1500).addClass('active');
    };

    $s(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 5000);

    });
</script>
于 2013-03-12T18:25:44.410 に答える