Javascript/XML Won't Load in IE

I'm trying to make an image slide show using a jQuery cycle plugin with javascript/xml to separate the image files from the html. I was able to have the images load and cycle in Chrome, Safari, Firefox, but not in IE. I think the problem is getting the javascript/xml to load in IE because the images do not appear at all in IE.

As of now, my xml is a variable in an external javascript page that is loaded with javascript in the html. When the images are loaded straight in the html, the slide show works in all browsers.

HTML:

 <scri开发者_运维百科pt 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>