Question

我可能会因为提出这个问题而被扯掉一个新的问题，但是我在我的智慧结束时，无数的类似问题并没有帮助我。

我一直在努力制作一张向右滑动的幻灯片。思考过程如下所示，我得到错误的行标有两个问号。

var slideIndex = 0;
var slides = document.getElementsByClassName("Slides");
var dots = document.getElementsByClassName("dot");
//I thought that maybe the error originated here so I triple checked everything here

showSlides();

function showSlides() {
    var i;
    for (i = 0; i < slides.length; i++) {
        if (slides[i].style.transform == "translateX(100%)") {
            slides[i].style.display = "none";
            //make sure slide that's about to be replaced doesn't interfere with next one.
            }
        slides[i].style.transform = "translateX(-100%)";
        //return all slides to -100% position. (Is already an issue because current
        //slide is supposed to move to the right but it'll jump. I'll figure this out,
        //this is NOT my question)
    }
    //??Error here. I know the line is empty I don't understand it neither??
    //Maybe it's the previous 'for' loop?

    slides[slideIndex - 1].style.transform = "translateX(100%)";
    //Move old slide 100%.
    slideIndex++;
    //Next Slide
    if (slideIndex > slides.length) { slideIndex = 1; }
    else if (slideIndex < 0) { slideIndex = slides.length; }
    //Self-explanatory
    slides[slideIndex - 1].style.display = "inline-block";
    slides[slideIndex - 1].style.transform = "translateX(0)";
    dots[slideIndex - 1].className += " active";
    //Move new slide in and activate concurrent dot
    if (slideIndex == 1) {
        setTimeout(showSlides(), 10000);
    }
    // I want the first picture to last longer
    else {
        setTimeout(showSlides(), 5000)
    }
}

HTML：

<div class="Slides">
    <img src="~/Images/Slideshow/Gallery-1.jpg" class="Slides-Images">
</div>

<div class="Slides">
    <img src="~/Images/Slideshow/Gallery-2.jpg" class="Slides-Images">
</div>

<div class="Slides">
    <img src="~/Images/Slideshow/Gallery-3.jpg" class="Slides-Images">
</div>

CSS：

.Slides {
    position: absolute;
    transition: transform 2s;
    width: 100%;
    height: 100%;
    margin: 0;
}

我试图创建一个Jsfiddle但我的互联网速度不够快D：

提前致谢

Answer 1

发表声明

var slideIndex = 0;

函数

中的以下语句

slides[slideIndex - 1].style.transform = "translateX(100%)";

将尝试评估slides[-1]因此错误。

接收错误：＆＃34;无法获得财产＆＃39;风格＆＃39;未定义或空引用＆＃34;在幻灯片中

1 个答案: