使用DHTML与XML制作Ajax幻灯片-WEB开发频道-中国IT实验室-技术·资讯·教育·服务·社区

创建 Ajax 幻灯片放映

最后一步是创建 Ajax 版本的幻灯片放映。这意味着要使用从 slides.php 服务获得的内容代替硬编码的图像列表。

Ajax 版本的幻灯片放映代码如清单 8 所示。

清单 8. Ajax 幻灯片代码

<html>
<head>
<style type="text/css">
body { background: black; margin: 0px; padding: 0px; }
</style>
<script src="KenBurnsAnimations.js">
</script>
<script src="Animation.js">
</script>
<script src="ImageInfo.js">
</script>
<script src="SlideShow.js">
</script>
</head>
<body>

<div style="position:relative;width:100%;height:100%;overflow:hidden;" 
  id="imgContainer">
</div>

<script>
function processReqChange()
{
  if (req.readyState == 4 && req.status == 200 
      && req.responseXML != null)
  {
    var items = [];
    var nl = req.responseXML.getElementsByTagName( 'slide' );
    for( var i = 0; i < nl.length; i++ )
    {
      var nli = nl.item( i );
      var src = nli.getAttribute( 'src' ).toString();
      var width = parseInt( nli.getAttribute( 'width' ).toString() );
      var height = parseInt( nli.getAttribute( 'height' ).toString() );
      items.push( { src: src, width: width, height: height } );
    }
    load_slides( items );
    start_slides();
  }
}

function loadXMLDoc( url )
{
  req = false;
  if(window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch(e) {
      req = false;
    }
  }
  else if(window.ActiveXObject)
  {
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
    try {
      req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
      req = false;
    }
  }
  }
  if(req) {
    req.onreadystatechange = processReqChange;
    req.open("GET", url, true);
    req.send("");
  }
}

loadXMLDoc( "http://localhost/kenburns/slides.php" );
</script>

</body>
</html>

我把 start_slides 和 load_slides 函数移到了外部 JavaScript 文件 SlidesShow.js 中，以免该文件过大。代码的其他部分和清单 2 中的 Ajax 测试页类似。只不过这些代码没有插入警告窗口，也没有把数据插入一个表格，而是创建了一个幻灯片信息数组，然后调用 load_slides 和 start_slides.

如此而已！这样就可以使用 Ken Burns Effect 动态地移动、缩放和渐变图像的 Ajax 幻灯片。

上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] 下一页