在多个类一个接一个褪色，(背景图像)滑块

Fading in multiple classes one after another, (background image) slider

本文关键字：一个 背景 滑块 图像 褪色      更新时间：2023-09-26

我正在尝试为wordpress网站创建一个背景滑块。它是一个全宽度滑块，它有四个滑块。我所做的是为每个图像创建4个单独的类，我试着对每个类进行fadeIn，一个接一个，间隔5秒。

我是新手，所以我的代码不是最佳实践，我敢肯定，坦率地说，它甚至没有工作。但是，我想知道有没有人对我还能做些什么有什么建议。

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

代替多个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));
    });
  }
});

在朋友的帮助下想出了一个更好的方法。制作了三个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);
    });

不确定这是否是您正在寻找的，但请尝试

$('.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);
    });
}
相关文章：