一个接一个地在多个类别中淡入淡出，(背景图像)滑块

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');
    });
}

Here is a 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语句，下面是示例代码。THis可能会对您有所帮助。

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