我需要关于来自JS的幻灯片代码的解释[关闭]

Posted 2021-04-04

var myIndex = 0;
carousel()

function Carousel() {
  var i = 0;
  var x = document.GetElementByClassName("mySlides");
  for (i = 0; i < x.length; i++)
    x[i] = style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
  myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 5000);
}

答案

错误

你试图获取所有幻灯片，GetElementsByClassName只在一个元素定位时使用该类，并且它是getElementsByClassName。

转盘（）

x [i] = style.display =“none”;

正确

getElementsByClassName方法

旋转木马（）

x [i] .style.display =“none”;

最终版本

var myIndex = 0;
Carousel();

function Carousel() {
  var i = 0;
  // get every slide element by classname
  var x = document.getElementsByClassName("mySlides");
  // hide every slide
  for (i = 0; i < x.length; i++){
    x[i].style.display = "none";
}
  // increment myIndex to get first slide in future and set it's display to shwon
myIndex++;
  // if index is greater than quantitiy of slides than by default display first slide 
if (myIndex > x.length) {
  myIndex = 1
}

  // set first element's display to block so it's shown
  // Example : array = ["bla,"blu"]
  // array[1] is "Blu" so we need to go currentIndex-1, because array 
  // indexing starts from 0
x[myIndex - 1].style.display = "block";
  // in every 5 seconds call next slide
setTimeout(Carousel, 5000);
}