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

Errors when making basic Javascript slideshow with navigation buttons

本文关键字：Javascript 幻灯片 出错 导航 按钮      更新时间：2023-09-26

我正在尝试制作一个带有前进和后退按钮的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];
        }
}

这是我的网页

<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>

将if (i = 0)更改为if (i == 0) 。同样if (i = 7)应该if ( i == 7).

相关文章：