Javascript按钮幻灯片答案

【问题标题】：Javascript button slideshowJavascript按钮幻灯片
【发布时间】：2020-05-15 18:21:44
【问题描述】：

我是 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>

【问题讨论】：

你应该像这样设置 src 属性 pic.src = "YOUR_IMG_URL"
这能回答你的问题吗？ JavaScript change img src attribute without jQuery

标签： javascript html dom

【解决方案1】：

将您的 colorIt 函数更改为以下内容。您需要设置src，然后将display 设置为阻止。您可能还想将 height 和 width 移动到 CSS。

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

【讨论】：

【解决方案2】：

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

}

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

你在正确的轨道上。但是，您需要在 JS 中设置每个属性。

我也无法加载 picturejs.org，所以我在其中放了一张 picsum 的图片。

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

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

function colorIt(e) {
  pic.src='https://picsum.photos/150/400'
  pic.width='400' 
  pic.height='150';
  pic.style.display='block';

}

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

【讨论】：

【解决方案5】：

请尝试以下代码：

function fillIt(e) {
  pic.style.display = "block";
  pic.src ="https://libertycity.net/uploads/download/gta5_lamborghini/thumbs/4qhllsfhd8fk9bm4mf36761u37/15205818409903_63e23c-pgta535987529.jpg";
}

【讨论】：

【解决方案6】：

您需要将图像的根目录添加到中，例如取决于您在 PC 中下载图像的位置。

希望这会有所帮助！

【讨论】：