Question

我知道之前已经提出这个问题，但是如果有人能够更详细地解释它会很棒。我在这个div里面有一个div和一个表格和一个图像。我正在制作一个图库，所以我前后有两个链接，如何让这些链接改变图像，或者更改div中的所有内容。我是javascript的新手，实际上我什么都不知道，如果我能得到一步一步的指令会很棒，我已经尝试了其他的邮政编码，但无法让它工作，所以我有不知道我做错了什么。

Answer 1

示例HTML：

<html>
<head><title>Dummy page</title></head>
<body>
  <div id="divID">
    <img id="backImg" src="http://test.com/sample.jpg">
  </div>
</body>
</html>

改变整个div：

var div = document.getElementByID('divID');
div.innerHTML = "<b>This is some html</b>";

只需更改图片：

var img = document.getElementByID('backImg');
img.src = "http://www.host.com/image.jpg';

Answer 2

这是我做出的一个很好的例子，可能有所帮助。试一试 - http://jsfiddle.net/SuperBoi45/XMSGe/

以下是快速浏览的代码：

HTML：

<button id="before">Previous</button>
<button id="next">Next</button>
<div id="imageGallery"></div>

JavaScript的：

function $(id) {
    return document.getElementById(id);
}
var foward = null,
    back = null,
    images = [
        "http://www.toxel.com/wp-content/uploads/2009/04/conceptcar04.jpg",
        "http://politicolnews.com/wp-content/uploads/2010/01/bill-gates-car.jpg",
        "http://www.youthedesigner.com/wp-content/uploads/2008/05/car-wallpapers19.jpg",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-555c9ae9cfd364db5307b2e8d717a00d",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-01589fb639efec5433a3e30a8a8dd449",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-31f8cbd6627edc1ba9ef2828f3423fdf",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-0f47a0c2db85b5d7c134d41bcdc65b2e",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-739fd589778207e542a6e31873a24433",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-6056a5df58462ea4951a2b328243b7a2",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-59028363fc0f7d0ee7aa1ebc5e72713a",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-eb09864be7a1fbe7e821bc1ee08c3a8b",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-50bd88090e05a452bba67d510ba4a0cc",
        "http://d2o7bfz2il9cb7.cloudfront.net/main-qimg-191b37eea296e90a242d24db90824c5c"
        ];

var img = new Image();
for (var i = 0; i < images.length; i++) { // caching the images for performance boost
    img.src = images[i];
}

var image = {
    count: -1,
    next: function() {
        if (image.count == (images.length) - 1) return false;
        image.count += 1;
        $('imageGallery').innerHTML = "<img src=\"" + images[image.count] + "\"\/>";
    },
    previous: function() {
        if (image.count <= 0) return false;
        image.count -= 1;
        $('imageGallery').innerHTML = "<img src=\"" + images[image.count] + "\"\/>";
    }
};

foward = image.next;
back = image.previous;
$('next').addEventListener("click", foward);
$('before').addEventListener("click", back);

关于这一点最好的事情是你要做的就是向数组添加一个新的图像URL，它仍然可以工作。如果你想改变图像而不是div中的所有内容，我建议你在图片库外面放一个div。

如何更改div的内容

2 个答案: