简单的图片轮播 jquery

Question

我正在尝试实现一个简单的图像轮播，它可以无限地改变我网站的横幅图片。

这是我目前所拥有的：

function bannerSlider() {

        setInterval(function() {

            if ($(".pictureBanner img").hasClass("activePicture")) {
                alert("fired");
                $(".pictureBanner img").removeClass("activePicture");
                $(".pictureBanner img").next().addClass("activePicture");
            }
    }, 4000);   
}

$(document).ready(bannerSlider);

实施后，这会更改第一张图片，但随后会停止触发（警报在这里让我看到函数实际触发了）。

我对网络开发比较陌生，但这似乎在理论上应该可行。

任何提示都会很棒，谢谢。

编辑：下面添加了 html 标记。

<div class="pictureBanner"><img class="activePicture" src="img/img1.jpg"></div>
<div class="pictureBanner"><img src="img/img2.jpg"></div>
<div class="pictureBanner"><img src="img/img3.jpg"></div>

编辑：经过你们的大力帮助，我得到了它的工作。下面是最终代码：

HTML

>

<div id="bannerPictures">
  <img class="activePicture" src="img/img1.jpg">
  <img src="img/img2.jpg">
  <img src="img/img3.jpg">
</div>

JS

函数bannerSlider() {

    setInterval(function() {  
        var img = $("#bannerPictures img.activePicture");
        var next = $(img.next());
        next.addClass("activePicture");
        img.removeClass("activePicture");
        if (next.length === 0) {
            $("#bannerPictures img").first().addClass("activePicture");   
        }

}, 4000);   

}

$(document).ready(bannerSlider);

Answer 1

试试这个：

function bannerSlider() {

    setInterval(function() {    
        var img = $(".pictureBanner img.activePicture");
        img.removeClass("activePicture");
        var next = img.parent().next().find("img").addClass("activePicture");
        if(next.length ==0){
            img = $(".pictureBanner:first img");
            img.addClass("activePicture");
        }
    }, 4000);   
}

$(document).ready(bannerSlider);

HTML：

<div class="pictureBanner"><img class="activePicture" src="img/img1.jpg"></div>
<div class="pictureBanner"><img src="img/img2.jpg"></div>
<div class="pictureBanner"><img src="img/img3.jpg"></div>

Answer 2

在您的 HTML 中，$(".pictureBanner img") 没有兄弟姐妹，只有 $(".pictureBanner") 有。所以我建议使用 pictureBanner 类将所有图像包装在 1 个 div 中。

$(".pictureBanner img").next().addClass("activePicture"); 将activePicture 类添加到作为.pictureBanner img 兄弟的每个 元素。因此，不仅是具有activePicture 类的图像的兄弟图像。通过将这个存储在一个变量中，您可以获得您真正想要的效果。我在这里创建了一个 Codepen：http://codepen.io/lutsen/pen/wBGMYE

这段代码的另一个问题是，如果没有兄弟姐妹，它就不会循环。现在它会在到达最后一张图片时停止。

JS：

function bannerSlider() {

        setInterval(function() {

          activePic = $(".pictureBanner img.activePicture");
          activePic.next().addClass("activePicture");
          activePic.removeClass("activePicture");

    }, 1000);   
}

$(document).ready(bannerSlider);

HTML：

<div class="pictureBanner">
  <img src="image.png" alt="" class="activePicture"/>
  <img src="image.png" alt="" />
  <img src="image.png" alt="" />
  <img src="image.png" alt="" />
  <img src="image.png" alt="" />
</div>