Javascript图像滑块不适用于外部* .js文件

Question

在过去的两天里，我一直在使用我在其他地方看过的一些代码为我的网站构建功能图像滑块/旋转木马。我试图根据我的需要调整它，并最终将其拆分为外部HTML / CSS和JS文件，因为内联javascript / CSS是一个nono。

代码有2个部分，上半部分添加前进和后退按钮，第二部分构建超时滑块。

如果我将代码分成3个文件，每次都会抛出这个错误。

slider.js:19 Uncaught TypeError: Cannot read property 'style' of undefined
    at showImage (slider.js:19)
    at slider.js:8

到达时

x[index-1].style.display = "block";

使用内联javascript工作正常。但我必须使用外部文件。

var index = 1;

function plusIndex(n){
    index = index + 1;
    showImage(index);
}

showImage(1);

function showImage(n){
    var i;
    var x = document.getElementsByClassName("slides");
    if(n > x.length){ index = 1};
    if(n < 1){ index = x.length};
    for(i=0;i<x.length;i++)
    {
        x[i].style.display = "none";
    }
    x[index-1].style.display = "block";
}
autoSlide();
function autoSlide(){
    var i;
    var x = document.getElementsByClassName("slides");
    for(i=0;i<x.length;i++){
        x[i].style.display = "none";
    }
    index++;
    if(index > x.length){index = 1}
    x[index-1].style.display = "block";
    setTimeout(autoSlide,2000);

}