Question

我刚刚开始学习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>

Answer 1

您不应该使用.onclick()。这在Javascript（more details here）中很糟糕。

使用.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>

Javascript图像幻灯片

1 个答案: