Question

使用导航按钮制作基本 Javascript 幻灯片时出错

2012-05-30

840

javascript html

我正在尝试制作一个带有前进和后退按钮的 javascript 幻灯片。我需要的只是 8 张图片，单击按钮即可转到下一张或上一张。但是，我的代码不起作用，我不明白为什么。我认为这是一个简单的修复，但已经很晚了，我觉得我已经尝试了所有方法。当我说它不起作用时，我指的是浏览器要么返回错误，提示“无法解析背景图像”（仅当我删除 if/then 语句并仅运行 else 部分时才会发生，当然前面没有 else ），要么它只是崩溃了，可能是因为当我尝试使用 if/then 语句运行它时出现了无限循环。这是一个 jsfiddle 链接： http://jsfiddle.net/AZchy/ 。感谢您的帮助！

这是我的 javascript：

var images = new Array(8);
images[0] = "url('screen1.jpg')";
images[1] = "url('screen2.jpg')";
images[2] = "url('screen3.jpg')";
images[3] = "url('screen4.jpg')";
images[4] = "url('screen5.jpg')";
images[5] = "url('screen6.jpg')";
images[6] = "url('screen7.jpg')";
images[7] = "url('screen8.jpg')";
var i = 0;

function slideShowForward(){
        if(i=7){
            i = 0;
            document.getElementById("images").style.backgroundImage = images[i];
        }
        else{
            i++;
            document.getElementById("images").style.backgroundImage = images[i];
        }
}
function slideShowBack(){
        if(i=0){
            i=7;
            document.getElementById("images").style.backgroundImage = images[i];
        }
        else{
            i--;
            document.getElementById("images").style.backgroundImage = images[i];
        }
}

这是我的 HTML

<body>
<div id="container">
<div id="images">
</div>
<div id="form">
<form name="buttons" action="">
    <input type="button" name="previous" value="Previous" onclick="slideShowBack()"/>
    <input type="button" name="next" value="Next" onclick="slideShowForward()"/>
</form>
</div>
</div>
</body>

Answer 1

将 if (i = 0) 更改为 if (i == 0) 。对于 if (i = 7) ，应为 if ( i == 7) 。

jasssonpet

2012-05-30