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

＆GT;

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

＆LT;

JS

function 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);

}

（文档）$。就绪（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>

简单的图片轮播jquery

2 个答案: