Question

我只有一个带有图片和图片的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个先前和＆amp;的链接。下。

<a href="#" onclick="">Previous</a>
<a href="#" onclick="">Next</a>

我想改变“图像”id＆amp;的图像使用AJAX（javaScript）的“imageContent”id的内容。

我应该遵循哪些步骤？

Answer 1

你认为像

这样的东西

<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)

Answer 2

查看this page，了解如何更改图片来源。

要更改DIV的内容，请为其提供ID并使用JavaScript更改其innerHTML

如何改变Image＆amp;内容使用JavaScript？

2 个答案: