添加淡入淡出过渡效果和自动图像更改

Question

嗨，我是 JavaScript 的新手，在为我正在开发的这段代码创建解决方案时遇到困难。
我需要为我的幻灯片添加淡入淡出过渡效果（一张图片变成另一张图片）。除了已经存在的按钮之外，图像应该会自动更改。这是完整的代码：
编辑：我 (@albert) 将代码放入片段中，然后抓取了我遇到的前两张图片...

    var slideIndex = 1;
    showDivs(slideIndex);
    function plusDivs(n) {
    showDivs(slideIndex += n);
    }

    function currentDiv(n) {
    showDivs(slideIndex = n);
    }
    function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slides");
    var dots = document.getElementsByClassName("active");
    if (n > x.length) {slideIndex = 1}    
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" white", "");
    }
    x[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " white";
    }

    .circle{
     height:9px;
     width:9px;
     padding:0;
     background-color:#000;
     }
    .container{
             position:relative;
               max-width:800px;
               max-height:350px;
               overflow:hidden;
    }
    .centered{
             text-align:center;
               margin-bottom:16px;
               font-size:18px;
               color:white;   
           position:absolute;
               left:0;
               bottom:0;               
     }
    .left-arrow{
             float:left;
               padding-left:16px;
               cursor:pointer
     }
    .right-arrow{
             float:right;
               padding-right:16px;
               cursor:pointer
    }
    .arrow:hover{
               color:#b4aa50;
    }
    .arrow{
            -webkit-transition:background-color .3s,color .15s,box-shadow 
    .3s,opacity 0.3s;
             transition:background-color .3s,color .15s,box-shadow 
    .3s,opacity   0.3s;
    }
    .circle-b{
               border:1px solid #fff;
             background-color:transparent;
                   -webkit-transition:background-color .3s,color .15s,box-shadow 
    .3s,opacity 0.3s;
                   transition:background-color .3s,color .15s,box-shadow 
    .3s,opacity 0.3s;
    }
    .circle-b:hover{
               color:#000;
               background-color:#fff;                  
    }

    .white{
               color:#000;background-color:#fff}
    }

    <div class="container">
  
    <img class="slides" src="https://i.stack.imgur.com/b9ukx.png" style="width:100%">
    <img class="slides" src="https://i.stack.imgur.com/wx8jF.png" style="width:100%">
    
      <div class="centered" style="width:100%">
            <div class="left-arrow arrow" onclick="plusDivs(-1)">&#10094</div>
            <div class="right-arrow arrow" onclick="plusDivs(1)">&#10095</div>
            <span class="circle active circle-b " onclick="currentDiv(1)"> </span>
            <span class="circle active circle-b " onclick="currentDiv(2)"> </span>
    </div>
    </div>

Answer 1

我从头开始写这个并为你做了一个fiddle：https://jsfiddle.net/bartlomiej/kdg581sL/（你需要在javascript设置中将load type设置为no wrap - in <body>看到它工作）

我希望这正是您想要实现的目标。

首先我将 slideIndex 的初始值设置为 0。

var slideIndex = 0;

然后我将图像元素数组保存到 slides 变量并将该数组的长度设置为 length。

var slides = document.getElementById('slides').children
var length = slides.length

下一行将 class active 设置为 stateIndex 中定义的图像元素。

setActiveSlide(slideIndex);

那么我们需要三个函数：

showPrevSlide() 仅当幻灯片不是第一张时才将 class active 设置为上一张幻灯片。

function showPrevSlide() {
  if (slideIndex - 1 != -1) {
    slideIndex -= 1;
  }

  setActiveSlide(slideIndex);
}

showNextSlide() 仅当幻灯片不是最后一张时才将 class active 设置为下一张幻灯片。

function showNextSlide() {
  if (slideIndex + 1 < length) {
    slideIndex += 1;
  }

  setActiveSlide(slideIndex);
}

最后 setActiveSlide() 遍历所有图像元素并将 active class 添加到 index.

中定义的图像元素

function setActiveSlide(index) {
  for (var i = 0; i < length; i++) {
    if (index == i) {
      slides[i].className += ' active';
    } else {
      slides[i].className = 'slide';
    }
  }
}

要在幻灯片上实现淡入淡出过渡效果，您应该使用 transition 和 opacity CSS 属性。您还需要将 position 设置为 absolute，以便图像将一个放在另一个上。

.slide {
 position: absolute;
 opacity: 0;
 transition: 1s;
}

和active class 样式。

.slide.active {
  opacity: 1;
}

希望我的回答对你有所帮助

编辑：如果您想以无限方式更改幻灯片，您必须稍微编辑 showPrevSlide() 和 showNextSlide()。

function showPrevSlide() {
  if (slideIndex - 1 == -1) { 
    slideIndex = length - 1; 
  } else {
    slideIndex -= 1;
  }

  setActiveSlide(slideIndex);
}

function showNextSlide() {
  if (slideIndex + 1 < length) {
    slideIndex += 1;
  } else {
    slideIndex = 0;
  }

  setActiveSlide(slideIndex);
}

如果您希望图像自动更改，只需使用 setInterval。例如：setInterval(function() { showNextSlide() }, 1000); 其中 1000 是以毫秒为单位的时间。

添加淡入淡出过渡效果和自动图像更改

Adding fade transition effect and automatic image change

javascript

slideshow

transition

fade