魚躍于淵

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

          導航

          <2025年7月>
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789

          留言簿(1)

          文章分類

          文章檔案

          搜索

          •  

          最新評論

          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

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


          網站導航:
           
          主站蜘蛛池模板: 深圳市| 商洛市| 太康县| 南开区| 镇雄县| 房山区| 通州市| 日照市| 美姑县| 区。| 遵化市| 邓州市| 沂源县| 德州市| 马鞍山市| 井冈山市| 孟村| 察隅县| 隆林| 奎屯市| 富源县| 兴业县| 安吉县| 丰宁| 广安市| 湘潭市| 乌拉特后旗| 监利县| 朝阳县| 阿拉尔市| 济宁市| 曲阳县| 云梦县| 通辽市| 三台县| 渭源县| 武强县| 沈阳市| 南靖县| 恩平市| 开远市|