javascript - 我无法使用 JavaScript 来播放图像幻灯片

Question

我正在尝试使用下面的 Javascript 代码创建一个简单的图像幻灯片类型的东西，但它所做的是显示网页中的第一张图像以及其他所有内容，然后在 5 秒后清除页面并显示 相同的图像，然后每 5 秒再次显示一次，除非它不再清除页面。

JavaScript:

var waiPics=new Array();
waiPics[0]='images/path.jpg';
waiPics[1]='images/gorse.jpg';
waiPics[2]='images/stream.jpg';
waiPics[3]='images/pines.jpg';
waiPics[4]='images/stump.jpg';

var time;

function timeUp() {
    delete document.write();
    nextPic();
}



function nextPic() {
    var picNum=0;
if (picNum = waiPics.length) {
    picNum=0;
}
else {
    picNum++;
} 
    document.write('<img src="'+waiPics[picNum]+'" title="Waipahihi" alt="Waipahihi">');
    time=setTimeout("timeUp()",5000);
}

HTML:

<script type="text/javascript">
<!-- Begin
nextPic();
//  End -->
</script>

我对 Javascript 不太有经验，所以提前感谢您的帮助。

Answer 1

picNum 将始终为零，因为它是在函数内部声明的，并且每次调用该函数时都会设置为零。即使你解决了这个问题，你的情况也是错误的:

if (picNum = waiPics.length) {

条件应该是:

if (picNum === waiPics.length) {

单个 = 符号将长度分配给 picNum，然后转换为 bool 值。数组长度非零，因此它变为真值。然后每次都会重置为零。

考虑使用JSLint检查您的代码是否有错误并提出改进建议。它标记了这个问题:

"Expected a conditional expression and instead saw an assignment."
if (picNum = waiPics.length) {

事实上，在代码上使用 JSLint 并检查其建议后，我会使用更像这样的东西:

// New array creation syntax
var waiPics = ['images/path.jpg', 'images/gorse.jpg', 'images/stream.jpg', 'images/pines.jpg', 'images/stump.jpg'];

var picNum = 0;  // Declare outside inner function so its value is preserved
var myDiv = document.getElementById("ssdiv");  // Get a div element to insert picture into

function nextPic() {
    if (picNum === waiPics.length) {    // Proper comparison
        picNum = 0;
    } else {
        picNum += 1;
    }

    // Set picture into div element without evil document.write
    myDiv.innerHTML = '<img src="' + waiPics[picNum] + '" title="Waipahihi" alt="Waipahihi">';

    // No longer need timeUp; also don't use eval syntax
    setTimeout(nextPic, 5000);
}

分配innerHTML可以避免document.write的各种问题，也不需要刷新页面来更改幻灯片图像。另请注意其他评论。