gpt4 book ai didi

javascript - 不隐藏其他内容的jquery淡入淡出效果

转载 作者:行者123 更新时间:2023-11-28 04:24:37 25 4
gpt4 key购买 nike

我有一个名为“ slider ”的类的 div,其中包含一个带有一些标题文本的部分( slider 文本类)。 slider 类中有一些带有图像的 div。这些 div 用于创建幻灯片。

<body>
<div class="slider">
<section class="slider-text">
<h1>header</h1>
<p>Some header text</p>
</section>
<div>
<img src="images/Photography-Camera-HD-Wallpaper1.jpg">
</div>
<div>
<img src="images/Amazing-mountains-in-nature-Big-size-Wallpaper.jpg">
</div>
</div>
</body>

以下 CSS 代码用于将 slider 文本类绝对定位在 slider 类中。图像占据了 slider 类的整个宽度:

 .slider {
position: relative;
text-align: center;
width: 100%;
height: 98vh;
}
.slider img {
max-width: 100%;
max-height: 100vh;
width: 100%;
height: 98vh;
}

.slider-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50%;
height: 50%;
color: white;
}

以下 jquery 代码用于 slider 效果。其中一个带有图像的 div 正在淡出,另一个正在淡入:

$(".slider > div:gt(0)").hide();
setInterval(function () {
$('.slider > div:first')
.fadeOut(1000)
.next('div')
.fadeIn(2000)
.end()
.appendTo('.slider');
}, 6000);

但问题是当图像 div 淡出时,'slider-text' 类中的文本也被隐藏了。当下一个图像 div 淡入时,它会进一步出现。当图像 div 淡出/淡入时,标题文本不应隐藏。

最佳答案

Sajjad 它没有隐藏文本,它始终只显示淡出和淡入的图像。只需更改文本颜色并检查它即可。

在 CSS 中:

.slider-text h1,.slider-text p{ z-index:3;}

关于javascript - 不隐藏其他内容的jquery淡入淡出效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42037555/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com