Question

我正在尝试为主页创建一个网站横幅，该横幅淡出然后淡入新图像。这些图像包含在一个数组中，我使用setInterval方法来完成它们。

但是，我遇到了淡入淡出方面的问题。图像正在发生变化，但不会出现jquery期望的效果。

当我检查控制台时，它会显示以下消息：

$（...）。attr（...）。fadeIn不是函数。

＆＃13;

$(document).ready(function() {

  var bannerImages = [
    "banner1.jpeg",
    "banner2.jpg",
    "banner3.png"
  ];

  var currentImage = 0;

  // CHANGE THE BANNER IMAGE EVERY 5 SECONDS
  setInterval(function() {
    if (currentImage > bannerImages.length - 1) {
      currentImage = 0;
    }

    $(".banner-img").attr("src", bannerImages[currentImage]).fadeIn();
    currentImage++;
  }, 5000)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="banner">
  <div class="row">
    <div class="col-md-12">
      <img src="banner3.png" class="img-responsive center-block banner-img">
    </div>
  </div>
</section>

＆＃13;

Answer 1

测试代码时我没有收到错误消息... 对于淡入淡出链，你必须链接fadeOut和FadeIn，在fadeOut回调中触发fadeIn：

HTML （我删除了src以便在第一张图片上显示fadein）：

<section id="banner">
    <div class="row">
        <div class="col-md-12">
            <img src="" class="img-responsive center-block banner-img">
        </div>
    </div>
</section>

CSS：

.banner-img { display: none; }

JS：

$(document).ready(function() {

    var bannerImages = [
        "banner1.jpeg",
        "banner2.jpg",
        "banner3.png"
    ];
    var currentImage = 0;

    // First display
    $(".banner-img").attr("src", bannerImages[currentImage++]).fadeIn();

    // CHANGE THE BANNER IMAGE EVERY 5 SECONDS
    setInterval( function() {
        if (currentImage === bannerImages.length) {
            currentImage = 0;
        }
        $(".banner-img").fadeOut(function() {
            $(".banner-img").attr("src", bannerImages[currentImage++]).fadeIn();
        });
    }, 5000);
});

<强> https://jsfiddle.net/vgta1rnm/2/

Answer 2

＆＃13;

var $banner = $(".banner-img")
$banner.attr("src",bannerImages[currentImage]);
$banner.fadeIn();

＆＃13;

jquery chain fadein方法不起作用

2 个答案: