我只有一个包含图像和内容的 HTML 页面。
<table>
<tr>
<td height="240" valign="top" colspan="3">
<img id="image" class="newsimage" src="D:/Search/images/search.jpg" alt="search" height="120" width="50%"/>
<div class="imageContect">image Content</div>
</td>
</tr>
</table>
下面有 2 个上一个和下一个链接。
<a href="#" onclick="">Previous</a>
<a href="#" onclick="">Next</a>
我想使用 AJAX (javaScript) 更改“image”id 的图像和“imageContent”id 的内容。
我应该遵循哪些步骤？
最佳答案
你认为类似吗
<head>
<script type="text/javascript">
var newsImageData = [
{src: "D:/Search/images/search1.jpg", data: "image content1"},
{src: "D:/Search/images/search2.jpg", data: "image content2"},
{src: "D:/Search/images/search3.jpg", data: "image content3"}
];
var currNewsImgIdx = 0;
function UpdateNews () {
var img = document.getElementById ("image");
var imgContent = document.getElementById ("imageContent");
img.src = newsImageData[currNewsImgIdx].src;
imgContent.innerHTML = newsImageData[currNewsImgIdx].data;
}
function NextNews () {
currNewsImgIdx = (currNewsImgIdx + 1) % newsImageData.length;
UpdateNews ();
}
function PrevNews () {
currNewsImgIdx = (currNewsImgIdx + newsImageData.length - 1) % newsImageData.length;
UpdateNews ();
}
function OnDocLoad () {
UpdateNews ();
}
</script>
</head>
<body onload="OnDocLoad ()">
<table>
<tr>
<td height="240" valign="top" colspan="3">
<img id="image" class="newsimage" src="" alt="search" height="120" width="50%"/>
<div id="imageContent" class="imageContent"></div>
</td>
</tr>
</table>
<a href="#" onclick="PrevNews ()">Previous</a>
<a href="#" onclick="NextNews ()">Next</a>
</body>
相关链接:
onload event ,
getElementById method ,
innerHTML property ,
src property (image)
关于javascript - 如何使用 JavaScript 更改图像和内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3511207/