鱼跃于渊

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

ajax 做图片幻灯片

Posted on 2008-09-24 16:01 鱼跃于渊 阅读(384) 评论(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

只有注册用户登录后才能发表评论。


网站导航: