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

时间:2016-06-04 14:49:46

标签: javascript html css

我正在尝试创建一个非常简单的全屏网站,我在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";
}

1 个答案:

答案 0 :(得分:0)

在您的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>