Question

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

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

这里有一个我做过的小提琴的链接。 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>

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

1 个答案: