更新:JavaScript代码显示为子节点

解决方案：我想通了。我在 zohodiscussions.com 的帮助下使用了jQuery而不是JavaScript。

Ajax Google plugin:  http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
**js. file:**
function form_input_classes() {
    jQuery('input[type="text"]').addClass('text');
    jQuery('input[type="password"]').addClass('text');
    jQuery('input[type="checkbox"]').addClass('checkbox');
    jQuery('input[type="radio"]').addClass('radiobutton');
    jQuery('input[type="submit"]').addClass('submit');
    jQuery('input[type="image"]').addClass('buttonImage');
}
function form_labelize() { jQuery(".labelize input:text").clearingInput(); }

var version = jQuery.browser.version;
if (version instanceof Object) { version = version.number(); }
function loadXMLDoc(XMLname) {
    return jQuery.ajax({ async: false, url: XMLname }).responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
jQuery(function () {
    jQuery('script').remove()
    form_input_classes();
    form_labelize();
    var pauseClicked = function () {
        jQuery('#cycle').cycle('pause');
        jQuery('#play').attr("style", "display:block");
        jQuery('#pause').attr("style", "display:none");
        jQuery('#pause').removeClass("active");
        return false;
    };
    var playClicked = function () {
        jQuery('#cycle').cycle('resume');
        jQuery('#pause').attr("style", "display:block");
        jQuery('#play').attr("style", "display:none");
        jQuery('#pause').addClass("active");
        return false;
    };
    jQuery('#play').attr("style", "display:none");
    jQuery('#pause').attr("style", "display:block");
    jQuery('#pause').click(pauseClicked);
    jQuery('#play').click(playClicked);
    jQuery("#slideNavigation a").focus(function () {
        jQuery(this).blur();
    });

    jQuery('#cycle').cycle({
        fx: 'fade',
        speed: 1000,
        timeout: 5000,
        prev: '#prev',
        next: '#next',
        pager: '#hero-nav ul ',
        pagerAnchorBuilder: function (idx, slide) {
            return '#hero-nav li:eq(' + idx + ') a.page';
        }
    });
})

**HTML references:**
<div id="content" class="clearfix home">
  <div id="hero">
    <div id='rotator'>
      <div id='cycle' class='clearfix'>
       <script type="text/javascript">
        jQuery(M).find('image').each(function (i, img) {
        document.write("<img src='" + jQuery(img).text() + "' />");
        })
       </script>
      </div>
    </div>
     <!--end-rotating-images-->
       <div id="hero-cycle" class="clearfix">
        <div id="hero-nav">
         <ul>
          <script type="text/javascript">
           jQuery(M).each(function (i, item){
           document.write("<li class='hero-text'>");
           document.write("<div class='hero-info clearfix'>");
           document.write("<a href='" +
     jQuery(item).find('filePath').text() + "' target='_blank'>" +
     jQuery(item).find('description').text()
     + "</a>");
           document.write("</div>")
           document.write("<a class='page' href='#'></a></li>")
          })
          </script>
      </ul>
      <div id="annc_controls">
         <a href="#" id="play">
         <img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom"/></a>
         <a href="#" id="pause">
         <img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom"/>
         </a>
      </div>
      <!--<div id="slideNavigation"></div>-->
      </div>
      <!-- /#hero-nav -->
      </div>
      <!-- /#hero-cycle -->
      </div>
      <!-- /#hero -->
      </div>

我更新了我的代码，旋转图像与描述内联。我唯一的问题是 javascript 首先加载而不是第一个图像。只有 3 张图像，代码显示第一帧，然后是图像 #1，依此类推。这是ActiveXObject和IE 9的浏览器问题吗？我在使用FireFox最新版本时遇到了类似的问题。此浏览器中不显示任何内容。有什么帮助吗？–

.html文件：

<head><script type="text/javascript">
<!--
    function loadXMLDoc(XMLname)
    //
    {
        var xmlDoc;
        if (window.XMLHttpRequest) {
            xmlDoc = new window.XMLHttpRequest();
            xmlDoc.open("GET", XMLname, false);
            xmlDoc.send("");
            return xmlDoc.responseXML;
        }
        // IE 5 and IE 6
        else if (ActiveXObject("Microsoft.XMLDOM")) {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.load(XMLname);
            return xmlDoc;
        }
        alert("Error loading document!");
        return null;
    }

    xmlDoc = loadXMLDoc("demo.xml");
    var M = xmlDoc.getElementsByTagName("rotatingImages");
    //-->
</script>
</head>
<div id="hero">
  <div id='rotator'>
   <div id='cycle' class='clearfix'>
     <script type="text/javascript">
      for (i = 0; i < M.length; i++) {
      document.write("<img src='" + xmlDoc.getElementsByTagName("image")[i].childNodes[0].nodeValue + "' />");
      }
     </script> 
      </div>
     </div>
    </div>
  <!--end-rotating-images-->
   <div id="hero-cycle" class="clearfix">
      <div id="hero-nav">
        <ul>
          <script type="text/javascript">
              for (i = 0; i < x.length; i++) { // Start 3 Rotating Images 
               document.write("<li class='hero-text'>");
               document.write("<div class='hero-info clearfix'>");
               var linkValue = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
               var linkValue = x[i].getElementsByTagName("filePath")[0].childNodes[0].nodeValue;
               document.write("<a href='" + linkValue + "' target='_blank'>");
               linkValue = x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
               document.write(linkValue);
               document.write("</a>");
               // End description for Rotating Images
               document.write("</div>");
               document.write("<a class='page' href='#'></a></li>");
          }
       </script>
   </ul>
   <div id="annc_controls">
    <a href="#" id="play">
    <img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom" /></a>
    <a href="#" id="pause">
    <img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom" />
    </a>
   </div>
  </div>
 </div>
</div>
</div>
</div>
</div>
<div>

XML文件：

`<?xml version="1.0" encoding="utf-8"?>
<homepage>
  <rotatingImages>
    <item>
      <image>manage/newImages/soldier-sunset.jpg</image>
      <description>My Test 1</description>
      <filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
    </item>
    <item>
      <image>manage/newImages/2012-04-03-jet.jpg</image>
      <description>My Test3</description>
      <filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
    </item>
    <item>
      <image>manage/newImages/sigar-brochre.jpg</image>
      <description>My Test2 </description>
      <filePath>http://www.sigar.mil/newsroom/spotlight/12/2012-sep-05-sopko-visits-afghanistan.html </filePath>
    </item>
  </rotatingImages>
 </homepage>`

由于rotator和cycle元素是动态添加的，因此在页面加载和jQuery函数运行时它们不存在。您需要使用 .on() 进行委托，以便在元素存在时添加处理程序。有关.on的信息，请参阅 http://api.jquery.com/on/并向下滚动到直接事件和委派事件部分。

页面的另一个问题是每次通过 for 循环使用相同的 ID。ID 必须是唯一的。重复的 ID 来自以下代码：

for (i = 0; i < x.length; i++) {
   document.write("<div id='rotator'><div id='cycle' class='clearfix'><div class='entry clearfix'>");

每次通过循环时，它都会添加ID为"旋转器"，"循环"，"英雄循环"和"英雄导航"的DIV。

将jQuery('#cycle').cycle({ … });代码放入jQuery(document).ready函数中。

**SOLUTION:** I figured it out. I used jQuery instead of JavaScript with a little help from zohodiscussions.com.
Ajax Google plugin:  http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
**js. file:**
function form_input_classes() {
    jQuery('input[type="text"]').addClass('text');
    jQuery('input[type="password"]').addClass('text');
    jQuery('input[type="checkbox"]').addClass('checkbox');
    jQuery('input[type="radio"]').addClass('radiobutton');
    jQuery('input[type="submit"]').addClass('submit');
    jQuery('input[type="image"]').addClass('buttonImage');
}
function form_labelize() { jQuery(".labelize input:text").clearingInput(); }

var version = jQuery.browser.version;
if (version instanceof Object) { version = version.number(); }
function loadXMLDoc(XMLname) {
    return jQuery.ajax({ async: false, url: XMLname }).responseXML;
}
xmlDoc = loadXMLDoc("demo.xml");
var M = xmlDoc.getElementsByTagName("rotatingImages");
jQuery(function () {
    jQuery('script').remove()
    form_input_classes();
    form_labelize();
    var pauseClicked = function () {
        jQuery('#cycle').cycle('pause');
        jQuery('#play').attr("style", "display:block");
        jQuery('#pause').attr("style", "display:none");
        jQuery('#pause').removeClass("active");
        return false;
    };
    var playClicked = function () {
        jQuery('#cycle').cycle('resume');
        jQuery('#pause').attr("style", "display:block");
        jQuery('#play').attr("style", "display:none");
        jQuery('#pause').addClass("active");
        return false;
    };
    jQuery('#play').attr("style", "display:none");
    jQuery('#pause').attr("style", "display:block");
    jQuery('#pause').click(pauseClicked);
    jQuery('#play').click(playClicked);
    jQuery("#slideNavigation a").focus(function () {
        jQuery(this).blur();
    });

    jQuery('#cycle').cycle({
        fx: 'fade',
        speed: 1000,
        timeout: 5000,
        prev: '#prev',
        next: '#next',
        pager: '#hero-nav ul ',
        pagerAnchorBuilder: function (idx, slide) {
            return '#hero-nav li:eq(' + idx + ') a.page';
        }
    });
})

**HTML references:**
<div id="content" class="clearfix home">
  <div id="hero">
    <div id='rotator'>
      <div id='cycle' class='clearfix'>
       <script type="text/javascript">
        jQuery(M).find('image').each(function (i, img) {
        document.write("<img src='" + jQuery(img).text() + "' />");
        })
       </script>
      </div>
    </div>
     <!--end-rotating-images-->
       <div id="hero-cycle" class="clearfix">
        <div id="hero-nav">
         <ul>
          <script type="text/javascript">
           jQuery(M).each(function (i, item){
           document.write("<li class='hero-text'>");
           document.write("<div class='hero-info clearfix'>");
           document.write("<a href='" +
     jQuery(item).find('filePath').text() + "' target='_blank'>" +
     jQuery(item).find('description').text()
     + "</a>");
           document.write("</div>")
           document.write("<a class='page' href='#'></a></li>")
          })
          </script>
      </ul>
      <div id="annc_controls">
         <a href="#" id="play">
         <img src="images/blue_play.gif" alt="Play" border="0" style="vertical-align: text-bottom"/></a>
         <a href="#" id="pause">
         <img src="images/blue_pause.gif" alt="Stop" border="0" style="vertical-align: text-bottom"/>
         </a>
      </div>
      <!--<div id="slideNavigation"></div>-->
      </div>
      <!-- /#hero-nav -->
      </div>
      <!-- /#hero-cycle -->
      </div>
      <!-- /#hero -->
      </div>

相关内容

最新更新

热门标签：