-2

我刚开始学习 javascript，我想对我正在尝试制作的幻灯片提供一些帮助。这是代码。它所要做的就是在单击按钮时循环浏览 3 张图像。

<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">

<script>
function Slideshow(){

        switch(x){
            default:
            document.getElementById("img").src="images/image2.jpg";
            var x=1;
            break;
        case 1:
            document.getElementById("img").src="images/image3.jpg";
            x++;
            break;
        case 2:
            document.getElementById("img").src="images/image1.jpg";
            x++;
            break;
    }
}

</script>
</head>
<body>

<div id="homepage_title">
    <h1>Slideshow</h1>
</div>

<div id="slideshow_wrapper">
    <div id="image">
        <img id="img" src="images/image1.jpg">
    </div>

    <div id="slideshow_button_right">
        <button type="button" onclick="Slideshow()">Next</button>
    </div>

</div>


</body>
</html>
4

1 回答 1

0

你不应该使用.onclick(). 在 Javascript 中这是不好的做法（更多细节在这里）。

使用.addEventListener(). 此外，由于您只是循环浏览 3 个不同的图像，因此您真的不需要开关/案例（这也缺少x变量）。相反，您可以只使用递增变量。所以你的代码看起来像这样（粗略的代码，可以改进）：

<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">

<script>

var x = 1;
function Slideshow(){
    document.getElementById("img").src="images/image"+x+".jpg";
    x++;
    if (x > 3)
        x = 1;
}

document.getElementById ("button-click").addEventListener ("click", Slideshow, false);

</script>
</head>
<body>

<div id="homepage_title">
    <h1>Slideshow</h1>
</div>

<div id="slideshow_wrapper">
    <div id="image">
        <img id="img" src="images/image1.jpg" />
    </div>

    <div id="slideshow_button_right">
        <button id="button-click" type="button">Next</button>
    </div>

</div>


</body>
</html>
于 2013-11-06T16:49:59.097 回答