魚躍于淵

          First know how, Second know why !
          posts - 0, comments - 1, trackbacks - 0, articles - 49

          ajax 做圖片幻燈片

          Posted on 2008-09-24 16:01 魚躍于淵 閱讀(388) 評論(1)  編輯  收藏 所屬分類: 平時小練習

          <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>Insert title here</title>

          <script type="text/javascript">
           
           window.onload=initAll ;
           var xhr = false ;
           var url = "ajax02.xml" ;
           
           function initAll(){
            if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest() ;
            }else{
             if(window.ActiveXObject){
              try{
               xhr = new ActiveXObject("Microsoft.XMLHttpRequest") ;
              }catch(e){}
             }
            }
            if(xhr){
             xhr.onreadystatechange = showContents ;
             xhr.open("GET", url, true) ;
             xhr.send(null) ;
            }else{
             document.getElementById("updateArea").innerHTML = "sorry ! but your pc coundn't create a xhr object !" ;
            }
            
            setTimeout("initAll()", 500) ;
           }
           
           function showContents(){
            if(xhr.readyState == 4){
             if(xhr.status == 200){
              var tempDiv = document.createElement("div") ;
              var imgDiv = document.getElementById("imgDiv") ;
              tempDiv.innerHTML = xhr.responseText ;
              var allLinks = tempDiv.getElementsByTagName("a") ;
              //alert(allLinks.length) ;
              for(i=0; i<allLinks.length; i++){
               //imgDiv.appendChild(allLinks[i].cloneNode(true)) ;
               //var br = document.createElement("br") ;
               //imgDiv.appendChild(br) ;
              }
              var imgid = Math.floor(Math.random() * allLinks.length) ;
              document.getElementById("imgDiv").innerHTML = allLinks[imgid].innerHTML ;
              
             }else{
              var outMsg = "there was a problem on your server : status = " + status ;
             }
            }
           }

          </script>

          </head>
          <body>
          <center>
           <div id="imgDiv"></div>
          </center>
          </body>
          </html>

          XML 文件為 :

          <?xml version="1.0" encoding="UTF-8"?>
          <author>
           <entry>
            <a href="jason1"><img width="100" height="100" border="0" src="images/1.jpg" /></a>
           </entry>
           <entry>
            <a href="jason1"><img width="100" height="100" border="0"  src="images/2.jpg" /></a>
           </entry>
           <entry>
            <a href="jason1"><img width="100" height="100" border="0" src="images/3.jpg" /></a>
           </entry>
           <entry>
            <a href="jason1"><img width="100" height="100" border="0" src="images/4.jpg" /></a>
           </entry>
           <entry>
            <a href="jason1"><img width="100" height="100" border="0" src="images/5.jpg" /></a>
           </entry>
          </author>

          Feedback

          # re: ajax 做圖片幻燈片[未登錄]  回復  更多評論   

          2009-02-16 12:43 by ^_^
          NICE

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 龙山县| 分宜县| 华阴市| 天长市| 孟州市| 郓城县| 安阳县| 汉寿县| 阿拉善盟| 梁河县| 广昌县| 吴忠市| 宣武区| 马鞍山市| 郑州市| 青州市| 新安县| 芦山县| 遂平县| 嵊州市| 南丰县| 凤城市| 张掖市| 略阳县| 镇原县| 清镇市| 尉犁县| 上蔡县| 大同市| 五华县| 鄄城县| 屯门区| 宜春市| 措勤县| 静乐县| 孟州市| 金沙县| 奎屯市| 买车| 枣阳市| 合山市|