Question

我是HTML的新手。我正在尝试加载包含图像名称的XML并动态显示在div中。我可以看到图像名称但无法分配img源。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

xmlhttp.open("GET","resimler.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
x=xmlDoc.getElementsByTagName("pic");
i=0;

function displayFoto(){
ad=(x[i].getElementsByTagName("ad")[0].childNodes[0].nodeValue);
document.getElementById("showFoto").innerHTML="img/" + ad;}

function next(){
if (i<x.length-1){
  i++;
  displayFoto();}}

function previous(){
if (i>0){
  i--;
  displayFoto();}}
</script>
</head>
<body onload="displayFoto()">
<div id='showFoto'><img id='showFoto'></img></div><br>
    <input type="button" onclick="previous()" value="<<" />
    <input type="button" onclick="next()" value=">>" />
</body>
</html>

有人可以指导我吗？

Answer 1

document.getElementById("showFoto").src="img/" + ad;

这可以帮助你加载图片，但我不保证代码的其余部分。你最好找一下Loader框架和jquery。

Answer 2

我同意Kemal，只是给你的xml片段以及div和img标签的id是一样的，是你不知道它或只是故意的

Answer 3

    <script type="text/javascript">

        function loadXMLDoc()
        {
            if (window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();
            }
            else
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    xmlDoc = xmlhttp.responseXML;
                    var Image = "";
                    x = xmlDoc.getElementsByTagName("IMAGE");

                    for (i = 0; i < x.length; i++)
                    {
                        Image = Image + x[i].childNodes[0].nodeValue + " ";
                        var res = Image.split(" ");

                        var ii = res[i];
                        var img = document.createElement("img");
                        img.src = ii;
                        img.width = 150;
                        img.height = 100;

                        document.body.appendChild(img);
                    }

                }
            }
            xmlhttp.open("GET", "ll.xml", true);
            xmlhttp.send();
        }
    </script>

</head>
<body onload="loadXMLDoc()">

</body>

使用javascript从XML动态显示图像

3 个答案: