Question

您好我是JavaScript的新手，并且很难为我正在开发的代码创建解决方案我需要为幻灯片添加淡入淡出过渡效果（图像变为另一个）。除现有按钮外，图像应自动更改。这是完整的代码：
编辑：我（@albert）将代码放入片段，然后抓住我遇到的前两张图片......

＆＃13;

    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";
    }

＆＃13;

    .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}
    }

＆＃13;

    <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>

＆＃13;

Answer 1

我是从头开始编写的，并为您做了一个小提琴：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

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

setActiveSlide(slideIndex);

然后我们需要三个功能：

showPrevSlide()，如果幻灯片不是第一个，则将类active设置为上一张幻灯片。

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

  setActiveSlide(slideIndex);
}

showNextSlide()，如果幻灯片不是最后一个幻灯片，则将active设置为下一个幻灯片。

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

  setActiveSlide(slideIndex);
}

最后setActiveSlide()迭代所有图像元素，并将active类添加到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班级样式。

.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是ms的时间。

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

1 个答案: