Question

我是JS中的一个真正的新手，我有这个代码，在我的HTML体内：

  var secDuration = 5;
  var image = 1;
  var maxImages = 4;
  var slider = document.getElementById('slider');

 function changeImage(requiredImage) {


    if (!requiredImage && requiredImage != 0){
      if(image < maxImages){
        image++;
      }
      else{
        image = 1;
      }
    }
    else{ 
      if(requiredImage > maxImages){
        image = 1;
      }
      else if(requiredImage < 1){ 
        image = maxImages;
      }
      else{
        image = requiredImage;
      }
    }
    slider.className = "image"+image;

    clearTimeout(timeout)
  }

  function nextImage(){
    changeImage(image+1);
  }
  function prevImage(){
    changeImage(image-1);
  }

  changeImage(1);

麻烦的是，当我将它粘贴到我正确连接到我的HTML的js文件中时，该脚本不再起作用了。我尝试了几种解决方案，但我可能会遗漏一些东西。很乐意帮助。

提前致谢。

Answer 1

JavaScript文件的有效嵌入是：

<html>
<head>
    ...
    <script type="text/javascript" src="/path/to/script.js"></script>
</head>
<body>
    ...
</body>
</html>

确保你以同样的方式完成。

然后，当您的网页完全加载时，您必须使用HTML页面中的元素，因此在document.getElementById方法中移动window.onload之类的语句：

window.onload = function() {
    slider = document.getElementById('slider');
};

因此，您更新的脚本应如下所示：

var image = 1;
var maxImages = 4;
var slider;

function changeImage(requiredImage) {
    if (!requiredImage && requiredImage != 0) {
        if (image < maxImages) {
            image++;
        }
        else {
            image = 1;
        }
    }
    else {
        if (requiredImage > maxImages) {
            image = 1;
        }
        else if (requiredImage < 1) {
            image = maxImages;
        }
        else {
            image = requiredImage;
        }
    }
    slider.className = "image" + image;

    clearTimeout(timeout)
}

function nextImage() {
    changeImage(image + 1);
}

function prevImage() {
    changeImage(image - 1);
}

window.onload = function() {
    slider = document.getElementById('slider');
    changeImage(1);
};

Javascript从body到js文件

1 个答案: