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

好的。Jere 是一个完整的示例代码。只需粘贴到网页并更改所有图像路径：

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 回答