1

网址： http: //www.gws-mbca.org

幻灯片放映在 Firefox 中有效。它曾经在 IE 和 Chrome 中工作。现在我在 IE 和 Chrome 中都收到以下错误：

未捕获的类型错误：无法设置未定义的属性“src”

该脚本使用<script type="...>文档头中的 a 链接。

网页中的代码如下：

<section style="margin: 0 auto; text-align: center;">
  <img src="./rPix/rp1.jpg" id="slide" width="900" height="200" alt="slide show images" />
</section>


<body onload="runShow();">

该函数runShow是 slideshow.js 的一部分 - 代码如下：

/* An automatically rotating slide show using Javascript and the DOM.
   This script cobbled together by Paul D.J. Vandenberg */

var j = 1;
var pix = new Array(11);

for (i = 0; i < pix.length; i++) {
  pix[i] = "rPix/rp"+j+".jpg";
  j++;
}

var index = Math.floor(Math.random() * 11) + 1;
var limit = pix.length - 1;

function runShow() { 
  if (index > limit) {
    index = 0;
  }
  document.slide.src = pix[index];
  setTimeout("runShow()", 10000);
  index++;
}
4

3 回答 3

0 
So here's what the code looks like now.

/* An automatically rotating slide show using Javascript and the DOM.
   This script cobbled together by Paul D.J. Vandenberg with a nice 
   assist from stackoverflow */

window.onload = function() {

  var j = 1;
  var pix = new Array(11);

  for (i = 0; i < pix.length; i++) {
    pix[i] = "rPix/rp"+j+".jpg";
    j++;
  }

  var index = Math.floor(Math.random() * 11) + 1;    // Start at a random slide
  var limit = pix.length - 1;
  var slide = document.getElementById("slide"); // Cache slide image element

  function runShow() { 
    if (index > limit) {
      index = 0;
    }
    slide.src = pix[index++];
  }
  setInterval(runShow, 10000);  // Interval more reliable than timeOut
  runShow();
}
于 2013-06-09T16:23:11.537 回答
0

确保在元素添加到 DOMrunShow() 之后调用。id="slide"

document.slide是 的简写document.getElementById("slide")。null当没有定义具有该 id 的元素时，后者将返回。

于 2013-06-07T22:35:28.430 回答
0

必须先加载 DOM，然后文档才能访问任何元素。通常在脚本位于<head>

window.onload = function(){
 var j = 1;
 var pix = new Array(11);

 for (i = 0; i < pix.length; i++) {
  pix[i] = "rPix/rp"+j+".jpg";
  j++;
 }

 var index = Math.floor(Math.random() * 11) + 1;
 var limit = pix.length - 1;

 window.runShow = function() { 
  if (index > limit) {
   index = 0;
  }
  document.slide.src = pix[index];
  setTimeout("runShow()", 10000);
  index++;
 }
};

“加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在 DOM 中，并且所有图像和子帧都已完成加载。” -MDN

建议的改进

我想我会加入这部分，因为我认为你可以在这里改进的地方很少，就你的方法而言，并决定提供一些建议。

  1. 让我们body onload="runShow()"从您的代码中删除并使其成为<body>您可能拥有的任何其他类等。

  2. 让我们也进入并使用间隔而不是超时，因为对于长时间运行的进程，它们更准确。

  3. 另外，让我们尝试从回调中删除所有字符串。

例子：

<html>
<head>
window.onload = function(){
 var pix = [];//array to hold image source strings
 var limit = 10;//0 based count for images
 for( var i = 0; i < limit+1; i++ ){//runs 11 times
  pix.push("rPix/rp"+(i+1)+".jpg";//push incrementally adds to pix array
 }
 var index = limit;//last index for image source in pix array
 var slide = document.getElementById("slide");//cache slide image element
 function runShow(){
  if( index > limit ) index = 0;//cycle images by array length
  slide.src = pix[index++];//change slide image using cached element
 }
 runShow();//run on load
 setInterval(runShow,10000);//run every 10 seconds
};
</head>
<body>
 <section style="margin: 0 auto; text-align: center;">
  <img src="./rPix/rp1.jpg" id="slide" width="900" height="200" alt="slide show images" />
 </section>
</body>
</html>
于 2013-06-07T22:37:58.233 回答