0

画像付きの12枚のスライドがあります。jQuery アニメーションまたはフェードイン/フェードアウト効果を使用したい。これが私のコードです：

$('#Li4').click(function () {
  $('#bnrImg').fadein(1000);
  $('#chnlLogo').fadein(1000);
  $('#mainBanner').css('backgroundColor', '#FBB03E');
  $('#bnrImg').attr('src', 'images/cBanners/bnr_neuro.png');
  $('#chnlLogo').attr('src', 'images/images.png');
  $('#chnlLink').attr('href', 'http://link.tv');
  $('#bnrImg').fadeout(1000);
  $('#chnlLogo').fadeout(1000);
});
$('#Li5').click(function () {
  $('#bnrImg').fadein(1000);
  $('#chnlLogo').fadein(1000);
  $('#mainBanner').css('backgroundColor', '#DB7EB4');
  $('#bnrImg').attr('src', 'images/cBanners/bnr_diabetes.png');
  $('#chnlLogo').attr('src', 'images/image.png');
  $('#chnlLink').attr('href', 'http://link.com');
  $('#bnrImg').fadeout(1000);
  $('#chnlLogo').fadeout(1000);
});

しかし問題は、#li4 から #li5 をクリックすると、#bnrImg と #chnlLogo がアニメーションを実行するか、クリック後にフェードイン/フェードアウトすることです。スライドをクリックした後にフェードアウト効果を持たせ、スライドが変更された直後に画像を自動的にフェードインしたいと考えています。ありがとう。

4

2 に答える 2

2

Ok。Jere は完全なサンプル コードです。Web ページに貼り付けて、すべての画像パスを変更するだけです。

HTML コード:

<div id="galleryContainer">
  <div id="photoShow">
    <div class="current"><img src="assets/banner/banner_one.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_two.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_three.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_four.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_five.jpg" width="900" height="324" class="gallery" /></div>
    <div><img src="assets/banner/banner_six.jpg" width="900" height="324" class="gallery" /></div>
  </div>
</div>

CSS コード:

#galleryContainer {
    width:900px;
    height:330px;
    margin:0 auto;
    position:relative;
    padding-bottom:10px;
}
#photoShow {
    position:relative;
    width:900px;
    height:324px;
    margin:0 auto;
}
#photoShow div {
    position:absolute;
    z-index: 0;
    margin-top:8px;
}
#photoShow div.previous {
    z-index: 1;
}
#photoShow div.current {
    z-index: 2;
}

そして、ここにあなたのjQueryコードがあります：

$(function() {
  setInterval("rotateImages()", 5000);
});
function rotateImages() {
  var curPhoto = $('#photoShow div.current');
  var nxtPhoto = curPhoto.next();
  if (nxtPhoto.length == 0)
    nxtPhoto = $('#photoShow div:first');
  curPhoto.removeClass('current').addClass('previous');
  nxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 2000,
    function() {
      curPhoto.removeClass('previous');
    });
  }
});
于 2013-01-07T07:37:13.947 に答える
1

フェードイン/アウト メソッドで使用できるコールバック関数を確認することをお勧めします。さらに、stopPropagation および preventDefault メソッドが役立つかもしれません。

于 2013-01-07T07:32:07.587 に答える