Question

我正在尝试使用带有javascript / xml的jQuery循环插件来制作图像幻灯片，以将图像文件与html分开。我能够在Chrome，Safari，Firefox中加载和循环图像，但不能在IE中。我认为问题是在IE中加载javascript / xml因为图像在IE中根本没有出现。

截至目前，我的xml是外部javascript页面中的变量，在html中加载了javascript。当图像直接加载到html中时，幻灯片放映适用于所有浏览器。

HTML：

 <script type="text/javascript">
   $(document).ready(function(){
    $('#slideshow').before('<div id="slideshow_nav">').cycle({
     fx:     'fade', 
     speed:   1000, 
     timeout: 5000,
     pause:   1,
     pager:  '#slideshow_nav'
   });
  });
 </script>
 <div id="slideshow">
 </div>
 <script type="text/javascript">
 $(xml).find('picture').each(function(){
     var html = [
     "<img src='"+$(this).attr("imageurl") + "' class='"+$(this).attr("imageclass")+"' />"
 ].join('');
     $("#slideshow").append(html);
 });
 </script>

JS：

var xml = ['<?xml version="1.0" encoding="utf-8"?>',
'<pictures>',
    '<picture imageurl="./images/bird.jpg"  imageclass="first" />',
    '<picture imageurl="./images/wild.jpg" />',
    '<picture imageurl="./images/race.jpg"  />',
    '<picture imageurl="./images/nature.jpg" />',
    '<picture imageurl="./images/op.jpg" />',
    '<picture imageurl="./images/butterfly.jpg" />',
'</pictures>'].join('');

CSS：

<style type="text/css">
#slideshow_nav img { display: none; }
#slideshow_nav img.first { display: block; }
#slideshow_nav { z-index: 50; position: absolute; top: 410px; left: 705px; border:1px; color:#FFFFFF; }
</style>

Javascript / XML将无法在IE中加载

0 个答案: