Javascript 需要帮助实现jQueryforLoop来创建通过添加新的CSS类来更改幻灯片的滑块吗

以下是我目前拥有的：

HTML:

目前，它似乎同时添加了slide2 img和slide3 img类，而不是一次运行每个类。我希望每次运行一个图像（因此在下一个图像显示之前，3个图像中的每一个都应该淡入淡出）

---

另外，我希望它无限循环，这样相同的3张图片将旋转。

您可能正在尝试做类似的事情

$(function() {
    var i = 1;
    (function doAnimation(){
        $('.slide'+i+'-img').delay(1000).fadeOut(500, function(){
            $(this).attr('class', 'slide' + (i = i==3 ? 1 : i+1) + '-img').fadeIn(500, doAnimation);
        });
    })();
});

---

只需在循环函数中使用变量迭代类。

您可以使用setInterval执行此操作：

var i = 1;
var theImage = $(".slide1-img");

setInterval(function () {
    console.log(theImage[0].className);
    theImage.fadeOut(500, function () {
       $(this).removeClass().addClass('slide' + i + '-img').fadeIn(500); 
    });

    i++;

    if (i === 4) {
       i = 1;
    }
}, 2000);

.slides {
width: 100%;
height: 300px;
overflow: hidden;
}

.slide1-img {
background: url(http://us.123rf.com/400wm/400/400/konradbak/konradbak1103/konradbak110300502/9188750-beautiful-lady-with-long-brown-hair.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}


.slide2-img {
background: url(http://us.123rf.com/450wm/itrifonov/itrifonov1210/itrifonov121000202/15752531-closeup-portrait-of-a-beautiful-young-woman-with-elegant-long-shiny-hair--concept-hairstyle.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}


.slide3-img {
background: url(http://us.123rf.com/450wm/subbotina/subbotina1307/subbotina130700109/20793602-beauty-woman-touching-her-long-and-healthy-brown-hair.jpg) 0 0 no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}

$(function() {
    var i = 1;
    (function doAnimation(){
        $('.slide'+i+'-img').delay(1000).fadeOut(500, function(){
            $(this).attr('class', 'slide' + (i = i==3 ? 1 : i+1) + '-img').fadeIn(500, doAnimation);
        });
    })();
});

var i = 1;
var theImage = $(".slide1-img");

setInterval(function () {
    console.log(theImage[0].className);
    theImage.fadeOut(500, function () {
       $(this).removeClass().addClass('slide' + i + '-img').fadeIn(500); 
    });

    i++;

    if (i === 4) {
       i = 1;
    }
}, 2000);