幻灯片显示css布局干扰html正文

Slideshow css layouts interfere with html body

本文关键字：html 正文 干扰 布局 显示 css 幻灯片      更新时间：2023-09-26

首先，我在css中有4个布局，我想添加一个幻灯片转换，第一个到第二个幻灯片转换可以，但第二个到第三个幻灯片转换不可以，因为如果我在jquery中添加fadeIn或fadeOut效果，第三个布局1秒会覆盖整个html主体，在1秒内，我在屏幕上有两个布局。1秒后，他在正常位置看起来很好。如果我不添加任何效果（fadeIn或fadeOut），过渡就可以了，而且它不会在正文中出现重叠布局！有什么想法吗？这是我的jQuery代码：

$('.next').click(function(){
var currentSlide=$('.active-slide');
var nextSlide=currentSlide.next();
if(nextSlide.length === 0){
nextSlide= $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
}

这是我的CSS代码：

.slide{
display:none;
}
.active-slide{
display:block;
}
.layout7{
float: left;
width: 970px;
height: 340px;
}
.layout7-2{
float: left;
width: 970px;
height: 340px;
}
.layout7-3{
float: left;
width: 970px;
height: 340px;
}
.layout7-4{
float: left;
width: 970px;
height: 340px;
}

为便于查看，附上图片：链接

网站链接的可见性：网站

您需要在fadeOut操作完成后调用fadeIn操作。我无法测试代码，但这应该可以工作。

更改：

currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');

对此：

currentSlide.fadeOut(600, function(){
    $('.active-slide').removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
});
相关文章：