JavaScript按钮幻灯片显示

Question

我是javascript编程的新手，所以有人可以帮助我。这是我的代码

var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];

button.addEventListener('click', colorIt, false);

function colorIt(e) {
  pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";

}

<div id="picture">
  <img src="" id="picture" style="display:none;"> 
</div>
<button id="button">Click Me</button>

Answer 1

function fillIt(e) {
  pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";

}

JavaScript中图像的来源无效。您在JS中使用了HTML超链接。

Answer 2

您需要在中添加映像的根目录，例如，根据您在PC上下载映像的位置来确定。

希望这会有所帮助！

Answer 3

.innerHTML修改内容之间开头和结尾标签（<div>THIS</div>），而不是标签本身的内容（<div THIS></div>）。

您可以使用setAttribute或直接设置属性来修改标签属性：

var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];

button.addEventListener('click', colorIt, false);

function colorIt(e) {
  pic.src='https://picturejs.org/adv/banner.jpg'
  pic.width='400px' 
  pic.height='150px'

}

<div id="picture">
  <img src="" id="picture" style="display:none;"> 
</div>
<button id="button">Click Me</button>

Answer 4

将fillIt功能更改为以下内容。您需要设置src，然后将display设置为阻止。您可能还需要将height和width移到CSS。

function fillIt(e) {
  pic.src='https://picturejs.org/adv/banner.jpg';
  pic.width = 400;
  pic.height = 150;
  pic.style.display = "block";
}