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

而不是多个if和else语句，您可以在jquery中使用每个循环这是示例代码。这可能对你有帮助。

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秒的间隔淡入淡出。

{{1}}

逐个淡入多个类，（背景图像）滑块

3 个答案: