javascript - 如何将当前幻灯片编号和淡入淡出效果添加到简单的幻灯片

Question

我正在尝试创建一个非常简单的全屏网站，我在 w3schools 中找到了这个脚本，但我想知道是否可以为 slider 添加淡入淡出效果。

有人能找到显示当前幻灯片编号的方法吗？

这是我制作的 fiddle 的链接。 https://jsfiddle.net/Lp1nv7wa/1/

如果可能的话，你能不能把脚本写得详细一些，这样我就可以试着理解脚本了。 (不懂 javascript)

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("mySlides");
var dots = document.getElementsByClassName("thumb");
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(" thumb_on", "");
}
x[slideIndex-1].style.display = "block";  
dots[slideIndex-1].className += " thumb_on";
}

Answer 1

在您的 Javascript 中，您的 dots 变量似乎存在错误，因为您没有以 thumb 作为类名的元素，因此我建议将其注释掉没有被使用。

实现淡入淡出效果的一种方法是使用 CSS 和 opacity。在您的 CSS 中，您可以添加这些行:

.mySlides{
  position: absolute;   /* puts all the slides on top of each other */
  top: 0; left: 0;      /* and positions them all at the top left   */
  transition: all 1s;   /* this animates the change in the css      */
                        /* the 1s stands for 1 second, you may      */
                        /* change that to any duration              */
}

对于您的 javascript，您应该将所有 x[...].style.display 更改为调整不透明度的那些。

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
    x[i].style.opacity = 0; //sets the opacity to 0
  }
  x[slideIndex-1].style.opacity = 1; //sets the opacity to 1

  document.getElementById("slideNumber").innerHTML = slideIndex; 
  //the previous line finds the element with an id of slideNumber
  //and sets its content to the current slide index
}

要完成幻灯片编号，请在您希望显示幻灯片编号的位置添加此行。

<span id="slideNumber"></span>