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

Question

I coded a simple slideshow with Javascript but it isn't working when I place it within my HTML page that I have created. 我用Javascript编写了一个简单的幻灯片，但是当我将其放在我创建的HTML页面中时，它无法正常工作。 So far I have tried to include it in different areas, different div's and from an external file. 到目前为止，我尝试将其包含在不同的区域，不同的div中以及来自外部文件。 Nothing seems to be working. 似乎没有任何作用。 I have tested the code on blank HTML and it works. 我已经在空白HTML上测试了代码，并且可以正常工作。 But when I use it within the page that I have put together, it wont load. 但是，当我在放在一起的页面中使用它时，它不会加载。

 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

Although there are a lot to of room for improvements, for now I'm giving you a working prototype of your version of code. 尽管还有很多改进的余地，但是现在我为您提供代码版本的有效原型。 Just added an id to the <img/> and how src is manipulated in changeImg() 刚刚在<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>

Having that said, let's see how you can improve your code. 话虽如此，让我们看看如何改善代码。 Please checkout the changeImg() function: 请签出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

u are using old fashioned way u maybe be practicing i just changed a bitin code 你正在使用老式的方式你可能正在练习我只是改变了一个位代码

i used getElementsByName() function to find element 我用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 个解决方案

解决方案1
4 已采纳 2019-04-13 11:16:03

解决方案2
0 2019-04-13 11:16:08

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2019-04-13 11:16:03

解决方案2 0 2019-04-13 11:16:08

解决方案1
4 已采纳 2019-04-13 11:16:03

解决方案2
0 2019-04-13 11:16:08