在多个类别中依次消失（背景图像）滑块

Question

我正在尝试为wordpress网站创建背景滑块。 这是一个全角滑块，它有四个幻灯片。 我要做的是为每个图像创建4个单独的类，并且我尝试在5秒钟的间隔后逐渐fadeIn每个类。

我是新来的人，所以我确定我的代码不是最佳实践，坦率地说，它甚至都不起作用。 但是在这里，我想知道是否有人对我还能做些什么提出任何建议。

if(jQuery(".background").hasClass('image-1')){
    jQuery('.image-1').fadeOut(5000, function() {
        jQuery(this).removeClass('image-1');
    });
    jQuery('image-2').fadeIn(5000, function() {
        jQuery(this).addClass('image-2');
    });
}else if(jQuery('.background').hasClass('image-2')){
    jQuery('.image-').fadeOut(5000, function() {
        jQuery(this).removeClass('image-2');
    });
    jQuery('image-3').fadeIn(5000, function() {
        jQuery(this).addClass('image-3');
    });
}else if(jQuery('.background').hasClass('image-3')){
    jQuery('.image-').fadeOut(5000, function() {
        jQuery(this).removeClass('image-3');
    });
    jQuery('image-4').fadeIn(5000, function() {
        jQuery(this).addClass('image-4');
    });
}

这是一个JSFiddle

Answer 1

不确定这是否是您要寻找的，但是尝试

$('.background').addClass('image-3');

var bg = $(".background");

if ( bg.hasClass('image-1') ){
    $('.image-1').fadeOut(5000, function() {
        bg.removeClass('image-1').addClass('image-2');
        $('.image-2').fadeIn(5000);
    });
} else if ( bg.hasClass('image-2') ) {
    $('.image-2').fadeOut(5000, function() {
        bg.removeClass('image-2').addClass('image-3');
        $('.image-3').fadeIn(5000);
    });
} else if (bg.hasClass('image-3')) {
    $('.image-3').fadeOut(5000, function() {
        bg.removeClass('image-3').addClass('image-4');
        $('.image-4').fadeIn(5000);
    });
}

Answer 2

可以使用jquery中的每个循环来代替多个if和else语句，这是示例代码。 这可能会帮助您。

var i =1;
jQuery(".background").each(function(){
  if(jQuery(this).hasClass('image-'+i)){
    jQuery('.image-'+i).fadeOut(5000, function() {
        jQuery(this).removeClass('image-'+i);
    });
    jQuery('image-'+(i+1)).fadeIn(5000, function() {
        jQuery(this).addClass('image-'+(i+1));
    });
  }
});

Answer 3

在朋友的帮助下找到了更好的方法。 制作了三个div，创建了这段代码，以每3秒间隔淡入和淡出它们。

    $(document).ready(function() {
        var imgcnt = 3;
        var curimage = 1;

        imageinterval = setInterval(function() {
            var newimg;
            if (curimage == imgcnt) newimg = 1;
            else newimg = curimage + 1;

            $("#image" + curimage).fadeToggle(1000);
            $("#image" + newimg).fadeToggle(1000);
            curimage = newimg;

        }, 3000);
    });