Question

我有一个名为'slider'的类的div，它包含一个带有一些标题文本的部分（slider-text类）。滑块类中有一些带有图像的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 {
    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代码用于滑块效果。其中一个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在后面消失时，标题文本不应该隐藏。

Answer 1

Sajjad它没有隐藏文本，它可见只有图像渐渐消失。只需更改文本颜色并检查它。

在css中：

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

Jquery褪色效果，不隐藏其他内容

1 个答案: