使用JavaScript更改图像源

Question

所以我是JavaScript的新手(这实际上是我第一次尝试做某事)并且我遇到了一些麻烦.我认为我有足够的知识来完成这项工作,我甚至用Google搜索了可以帮助我解决问题的教程和脚本,但没有任何帮助.

我似乎无法更改图像源,这是我到目前为止的代码:

<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("img").src=a.src;
    }
</script>
<div id="main_img">
    <img id="img" src="1772031_29_b.jpg">
</div>
<div id="thumb_img">
    <img src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg");'>
    <img src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg");'>
    <img src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg");'>
</div>

任何人都可以解释我是否做错了什么？或者也许我错过了什么？请帮帮我 :-)

Answer 1

function changeImage(a)所以没有a.src=>只是使用a.

在这里演示

Answer 2

如果您将始终使用该模式_b而不是_t您可以通过传递对图像本身的引用使其更通用:

onclick='changeImage(this);'

然后在函数中:

function changeImage(img) {
    document.getElementById("img").src = img.src.replace("_t", "_b");
}

Answer 3

你唯一真正的问题是你传递的是一个字符串,而不是一个带有.src属性的对象

一些建议:

• 使用自然可点击的元素触发器,例如 <button>
• data-对元素使用事件数据的前缀属性
• 在DOM准备好时使用后期绑定事件.

标记:

<div id="main_img">
  <img id="img" src="1772031_29_b.jpg">
</div>
<ul id="thumb_img">
  <li><button data-src='1772031_29_b.jpg'><img src='1772031_29_t.jpg' /></button></li>
  <li><button data-src='1772031_55_b.jpg'><img src='1772031_55_t.jpg' /></button></li>
  <li><button data-src='1772031_53_b.jpg'><img src='1772031_53_t.jpg' /></button></li>
</ul>

JavaScript的:

如果您需要支持IE和其他旧版浏览器,请为Array.from使用适当的polyfill

function clickedButton(btn, event) {
  document.getElementById('img').src = btn.getAttribute('data-src');
}

function bindClick(btn) {
  btn.addEventListener('click', clickedButton.bind(null,btn));
}

// Setup click handler(s) when content is loaded
document.addEventListener("DOMContentLoaded", function(){
  Array.from(document.querySelectorAll('#thumb_img > button'))
    .forEach(bindClick));
});

编辑:适用于现代浏览器的Vanilla JS.

Answer 4

我也管这个问题。但是每次更改源（图像）时都通过图像的实例来解决它。

似乎只会调用一次 onload 。但这样，您就可以随时更改图像。

function chageIcon(domImg,srcImage)
    {
        var img = new Image();
        img.onload = function()
        {
            // Load completed
            domImg.src = this.src;
        };
        img.src = srcImage;
    }

模式使用。

chageIcon(document.getElementById("img"),"newIcon.png");