Question

我用Javascript编写了一个简单的幻灯片，但是当我将其放在已创建的HTML页面中时，它无法正常工作。到目前为止，我尝试将其包含在不同的区域，不同的div中以及来自外部文件。似乎没有任何作用。我已经在空白HTML上测试了代码，并且可以正常工作。但是当我在放在一起的页面中使用它时，它不会加载。

var i = 0; 			  // Start Point
var images = [];	// Images Array
var time = 3000;	// Time Between Switch

// Image List
images[0] = "gotpic1.jpg";
images[1] = "gotpic2.jpg";

// Change Image
function changeImg(){
  document.slide.src = images[i];

  // Check If Index Is Under Max
  if (i < images.length - 1){
    // Add 1 to Index
    i++; 
  } else { 
    // Reset Back To O
    i = 0;
  }

  // Run function every x seconds
  setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload = changeImg;

body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-repeat:no-repeat;
  background-size: cover;
}
.gotlogo{
  text-align: center; 
}
.slider {
  border: solid black 2p
}
.slider{
  height: 300px;
  width: 500px;
}

<body style=" background-image: url(&quot;forest1.jpg&quot;);">
  <div class="gotlogo">
    <img src="gotlogo2.png" alt="GOT">
  </div>
  <div class="slider">
    <img name="slide" height="200" width="400">
  </div>
  <p>
    <br>
  </p>
</body>

Answer 1

尽管还有很多改进的余地，但是现在，我为您提供了您的代码版本的有效原型。刚刚向<img/>添加了一个ID，以及如何在changeImg（）中操纵src

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

</head>

<body style=" background-image: url(&quot;forest1.jpg&quot;);">
  <div class="gotlogo"> <img src="gotlogo2.png" alt="GOT"> </div>
  <div class="slider">
    <img name="slide" id="slide" height="200" width="400">
  </div>
  <p><br>
  </p>
  <script>
    var i = 0; // Start Point
    var images = []; // Images Array
    var time = 3000; // Time Between Switch

    // Image List
    images[0] = "http://www.buyersgohappy.com/blog/wp-content/uploads/2017/08/GOT-Kingdom-in-India-11-750x339.jpg";
    images[1] = "https://i.kym-cdn.com/entries/icons/mobile/000/010/576/got.jpg";


    // Change Image
    function changeImg() {
      document.getElementById("slide").src = images[i];

      // Check If Index Is Under Max
      if (i < images.length - 1) {
        // Add 1 to Index
        i++;
      } else {
        // Reset Back To O
        i = 0;
      }

      // Run function every x seconds
      setTimeout("changeImg()", time);
    }

    // Run function when page loads
    window.onload = changeImg;
  </script>
  <style>
    body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .gotlogo {
      text-align: center;
    }
    
    .slider {
      border: solid black 2px
    }
    
    .slider {
      height: 300px;
      width: 500px;
    }
  </style>
</body>

</html>

话虽如此，让我们看看如何改善代码。请检出changeImg（）函数：

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

</head>

<body style=" background-image: url(&quot;forest1.jpg&quot;);">
  <div class="gotlogo"> <img src="gotlogo2.png" alt="GOT"> </div>
  <div class="slider">
    <img name="slide" id="slide" height="200" width="400">
  </div>
  <p><br>
  </p>
  <script>
    var i = 0; // Start Point
    var images = []; // Images Array
    var time = 3000; // Time Between Switch

    // Image List
    /*
    For local images:
    say you have a local folder structure like this:
    
    GOT
    |
    --> index.html (this file)
    |
    --> Images
        |
        --> got1.jpg
        |
        --> got2.jpg
        
    Now in you can can these images like:
    images[0] = "Images/got1.jpg"
    images[1] = "Images/got2.jpg"
    
    Let's try another example folder structure:
    
    GOT
    |
    --> Html
    |   |
    |   --> index.html (this file)
    |
    --> Images
        |
        --> got1.jpg
        |
        --> got2.jpg
        
    Now in you can can these images like:
    images[0] = "../Images/got1.jpg"
    images[1] = "../Images/got2.jpg"
    
    */
    images[0] = "http://www.buyersgohappy.com/blog/wp-content/uploads/2017/08/GOT-Kingdom-in-India-11-750x339.jpg";
    images[1] = "https://i.kym-cdn.com/entries/icons/mobile/000/010/576/got.jpg";


    // Change Image
    function changeImg() {
      document.getElementById("slide").src = images[i];

      // Keep index under the size of images array
      i = (i+1) % images.length;
    }

    // Run function when page loads
    window.onload = function() {
      // Run function every x seconds
      setInterval(changeImg, time);
    }
  </script>
  <style>
    body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .gotlogo {
      text-align: center;
    }
    
    .slider {
      border: solid black 2px
    }
    
    .slider {
      height: 300px;
      width: 500px;
    }
  </style>
</body>

</html>

Answer 2

您正在使用老式的方式，您可能正在练习，我只是更改了位代码

我使用了getElementsByName()函数来查找元素

var i = 0; 			  // Start Point
var images = [];	// Images Array
var time = 3000;	// Time Between Switch

// Image List
images[0] = "https://www.w3schools.com/html/pic_trulli.jpg";
images[1] = "https://www.w3schools.com/html/img_girl.jpg";

// Change Image
function changeImg(){
  document.getElementsByName('slide')[0].src = images[i];

  // Check If Index Is Under Max
  if (i < images.length - 1){
    // Add 1 to Index
    i++; 
  } else { 
    // Reset Back To O
    i = 0;
  }

  // Run function every x seconds
  setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload = changeImg;

body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-repeat:no-repeat;
  background-size: cover;
}
.gotlogo{
  text-align: center; 
}
.slider {
  border: solid black 2p
}
.slider{
  height: 300px;
  width: 500px;
}

<body style=" background-image: url(&quot;forest1.jpg&quot;);">
  <div class="gotlogo">
    <img src="gotlogo2.png" alt="GOT">
  </div>
  <div class="slider" name='w'>
    <img name="slide" height="200" width="400">
  </div>
  <p>
    <br>
  </p>
</body>

为什么我的幻灯片放映不能在我的HTML中使用？

2 个答案: