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

标签 javascript jquery html css image

我有一个名为“ 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/

相关文章:

javascript - 使用外部多模式 JavaScript

html - ie11中的动态行显示

html - 使用 CSS 的灵活大小的圆形图像

javascript - 需要组合 jQuery 函数的帮助

javascript - D3JS .call() 异常

jquery - 这种推迟是否需要某种解决方案

jquery - jsPDF addImage浏览器崩溃

javascript - jquery window.load() 函数不会在 ios5 上触发

javascript - 从 JavaScript 中的对象数组中选择特定值

javascript - 如何将 div 连接到 iframe 中用于搜索站点的数据 url