如何在简单的幻灯片显示中添加当前幻灯片编号和淡入淡出效果

Question

I am trying to create a very simple fullscreen website and I found this script in w3schools but I would like to know if it would be possible to add a fadein fadeout effect the slider.

Could someone find a way to display the current slide number as well?

Here goes a link to a fiddle I did. https://jsfiddle.net/Lp1nv7wa/1/

If possible can you make the script verbose so I can try to understand the script. ( no knowledge of 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

In your Javascript, there seems to be an error regarding your dots variable as you have no elements with thumb as a class name so I suggest commenting that out if it's not being used.

One way you can achieve a fade-in-fade-out effect is by using CSS and opacity . In your CSS, you can add these lines:

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

For your javascript, you should change all of the x[...].style.display into ones that tweaks opacity.

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
}

To complete the slide numbering, add this line where you want your slide number to appear.

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