HTML / CSS / JS：如何制作平滑过渡的幻灯片显示，其中一个div淡出以显示下一个div？

问题描述

我正在尝试在一个人要求我制作的网站上制作具有平滑过渡效果的幻灯片。

例如，当我单击“下一步”时，淡出的当前幻灯片（带有文本和按钮的div）将显示下一张幻灯片。

这里是HTML（感谢headstarter编辑）：

<div id="ssContainer">
    <div class="slideshow" id="selected">
        <img src="images/slideshow/1.jpg" />
        <div class="sstext">
            <h1>Welcome to White Grass</h1>
            <p>Your complete solution to home building</p>
            <a href="" class="btnLink"><button id="portfolioBtn">See Our Portfolio</button></a>
        </div>
    </div>
    <div class="slideshow">
        <img src="images/slideshow/2.jpg" />
        <div class="sstext">
            <h1>Custom Home Builder</h1>
            <p>Customer satisfaction is our top priority</p>
        </div>
    </div>
    <div class="slideshow">
        <img src="images/slideshow/3.jpg" />
        <div class="sstext">
            <h1>Professional &amp; Experienced</h1>
            <p>A history of exceptional homes</p>
            <a href="" class="btnLink"><button id="contactBtn">Contact Us Now</button></a>
        </div>
    </div>
    <img id="prev" alt="PrevIoUs Slide" onclick="prev();" src="images/slideshow/leftarrow.png"></img>
    <img id="next" alt="Next Slide" onclick="next();" src="images/slideshow/rightarrow.png"></img>
</div>

和CSS：

.slideshow {
    display: none;
    height: 100%;
    position: relative;
    transition: display 0.2s;
}

.slideshow img {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.sstext {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.sstext * {
    text-align: center;
}

.sstext h1 {
    font-size: 2.5em;
    text-transform: uppercase;
    background-color: rgba(0,50%);
    padding: 5px;
}

.sstext p {
    font-size: 1.1em;
    background-color: rgba(0,50%);
    padding: 5px;
}

.sstext button {
    position: absolute;
}

#prev,#next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 10px;
    transition: background-color 0.2s;
}

#next {
    right: 0;
}

#prev:hover,#next:hover {
    background-color: rgba(0,50%);
}

#selected {
    display: block !important;
}

#portfolioBtn {
    left: 26%;
    transform: translateX(26%);
}

#contactBtn {
    left: 29%;
    transform: translateX(29%);
}

button {
    display: block;
    border: none;
    background-color: #0074c2;
    padding: 15px;
    font-size: 1em;
    font-family: roboto;
    color: white;
    border-radius: 3px;
    transition: background-color 0.2s;
}

此外，字体是Roboto。我在CSS的正文部分添加了该内容。

这是图像：

由于有一个答案，我现在有了一个非常基本的JavaScript概念：

var slideIndex = 1;
var slides = document.getElementByClassName("slideshow");

function prev() {
     if(slideindex < 1) {
          slideindex = 3;
     }
     else {
          slideindex--;
     }
     
     showSlides();
}

function next() {
     if(slideIndex > 3) {
          slideIndex = 1;
     }
     else {
          slideIndex++;
     }
     
     showSlides();
}

function showSlides() {
     if(slideIndex == 1) {
          slides[0].id = "selected";
          slides[1].id = "";
          slides[2].id = "";
     }
     else if(slideIndex == 2) {
          slides[0].id = "";
          slides[1].id = "selected";
          slides[2].id = "";
     }
     else if(slideIndex == 3) {
          slides[0].id = "";
          slides[1].id = "";
          slides[2].id = "selected";
     }
}

现在，这是问题所在：

通过display过渡，图像不会从block过渡到none。

我什至尝试弄乱opacity。给我动画但没有幻灯片的感觉。

已更改.slideshow和#selected部分的代码，但已还原：

.slideshow {
    display: block;
    height: 100%;
    position: relative;
    opacity: 0;
    transition: opacity 0.2s;
}

#selected {
    opacity: 1 !important;
}

我该如何解决？另外，尝试将z-index弄乱。

此外，我还必须单击两次上一个和下一个按钮才能从幻灯片3更改为1或从幻灯片1更改为3。还需要对此进行修复。

请不要使用jQuery或我自己的jQuery以外的任何外部JS脚本。

解决方法

好吧，这个问题并不符合Stackoverflow，因为我们希望您展示您尝试过的东西并展示您研究的内容。现在，您主要是在要求我们为您编写代码。

一些研究和阅读将帮助您开始学习该主题： how to create transition css javascript

但是，嘿！我也去过那里，所以，我会尝试给你一个例子。

请勿使用此代码 这仅出于示例目的，并不能完全满足您的要求。该代码只会使图像背景变淡，并且您正在尝试更改包括图像和文本在内的整个代码块。

接下来的目标仅仅是帮助您了解事物的工作原理。

假设您只想淡入和淡出幻灯片。为此，我将使用opacity CSS属性。

.slideshow img {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
    opacity: 0;
    transition: opacity 2s;
}

也就是说，您必须在可点击的图片中添加一些ID和功能：

<img id="slide1" src="images/slideshow/1.jpg" />
<img id="slide2" src="images/slideshow/2.jpg" />
<img id="slide3" src="images/slideshow/3.jpg" />

<img id="prev" alt="Previous Slide" onclick="fadeTransition('prev')" src="images/slideshow/leftarrow.png"></img>
<img id="next" alt="Next Slide" onclick="fadeTransition('next')" src="images/slideshow/rightarrow.png"></img>

然后，有一些Javacript可以帮助您开始使用它

var currentSlide = 1;//You need a var that contain the current slide that is show
function fadeTransition(side) {
    if ((side === 'prev' && currentSlide === 1) || (side === 'next' && currentSlide === 3)) {return;}
    if (side === 'prev') {var newSlide = currentSlide - 1;}
    if (side === 'next') {var newSlide = currentSlide + 1;}
    document.getElementById('slide'+currentSlide).style.opacity = 0;
    document.getElementById('slide'+newSlide).style.opacity = 1;
    currentSlide = newSlide;
    return;
}

有一个问题，在加载时，所有图像的不透明度为0。您必须更改第一张图像的初始状态。此时，我将使用类似

的类

.in {
     opacity: 1 !important;
}

然后将其添加到Javascript中，而不是更改style.opacity类，而是添加和删除in类并将其添加到HTML中以进行加载：

<img id="slide1" class="in" src="images/slideshow/1.jpg" />

javascript change class

因此，现在，大多数以前的Javascript代码块都不可用。请记住，您必须存储当前显示的块。限制您的代码，以便当当前幻灯片是第一张幻灯片时，用户无法到达要转到上一张幻灯片的位置。

我希望这会帮助您实现目标。

html javascript slideshow