JavaScript - 显示/隐藏功能

Question

我是 JavaScript 的新手，我不知道如何处理这个家庭作业 -

“修改页面以隐藏所有图像，直到单击“开始”按钮。单击后，开始按钮应变为停止按钮并显示“停止”字样，单击时隐藏图像。一旦隐藏，该按钮应变为开始按钮并显示“开始”一词并再次像开始按钮一样起作用。请注意，有一个按钮可以更改文本以及根据节目当前是停止还是开始而改变的内容。”

我知道我应该使用显示/隐藏效果，但我真的不知道如何将它们应用于代码？

    <!doctype html>
    <html>
    <head>
        <title>Slide Show</title>
        <!-- will remove the 404 error for favicon.ico from console -->
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="icon" href="favicon.ico" type="image/x-icon">

        <!-- using jQuery -->
        <link href="simpleImageV2.css" rel="stylesheet" type="text/css">
        <script src="jquery-3.3.1.min.js"></script>
        <script src="simpleImagesV2.js"></script>
    </head>

    <body bgcolor="black" onload="preLoadImages()">
        <div id="setSize">
        <img name="campus_pic" src="images/fall_1_480x640.png" width="480" height="640">
        </div>
        <br />
        <br />
        <button id="startShow">Start the Show</button>
        <button id="stopShow">Stop the Show</button>
    </body>
    </html>

JavaScript -

/*global $ */
var i = 0, myTimer, campus;

function preLoadImages() {
    "use strict";
    if (document.images) {
        campus = new Array();  // global variable
        campus[0] = new Image();
        campus[0][0] = "images/fall_1_480x640.png";
        campus[0][1] = "480";
        campus[0][2] = "640";
        campus[1] = new Image();
        campus[1][0] = "images/winter_1_640x480.png";
        campus[1][1] = "640";
        campus[1][2] = "480";
        campus[2] = new Image();
        campus[2][0] = "images/spring_1_640x480.png";
        campus[2][1] = "640";
        campus[2][2] = "480";
        campus[3] = new Image();
        campus[3][0] = "images/summer_1_480x640.png";
        campus[3][1] = "480";
        campus[3][2] = "640";
    } else {
        window.alert("This browser does not support images");
    }
}

Answer 1

你可以像下面这样使用jQuery：

 /*global $ */ var i = 0, myTimer, campus; function preLoadImages() { "use strict"; if (document.images) { campus = new Array(); // global variable campus[0] = new Image(); campus[0][0] = "images/fall_1_480x640.png"; campus[0][1] = "480"; campus[0][2] = "640"; campus[1] = new Image(); campus[1][0] = "images/winter_1_640x480.png"; campus[1][1] = "640"; campus[1][2] = "480"; campus[2] = new Image(); campus[2][0] = "images/spring_1_640x480.png"; campus[2][1] = "640"; campus[2][2] = "480"; campus[3] = new Image(); campus[3][0] = "images/summer_1_480x640.png"; campus[3][1] = "480"; campus[3][2] = "640"; } else { window.alert("This browser does not support images"); } } function init() { $('#stopShow').hide(); } $(document).ready(function () { $("#startShow").click(function () { var images = ['<div>']; campus.forEach(function (img) { images.push('<img src="' + img[0] +'" height="' + img[1] + '" width="' + img[2] + '" />'); }); images.push('</div>'); $("#images").html(images.join('')); $('#startShow').hide(); $('#stopShow').show(); }); $("#stopShow").click(function () { $("#images").html(''); $('#stopShow').hide(); $('#startShow').show(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!doctype html> <html> <head> <title>Slide Show</title> <!-- will remove the 404 error for favicon.ico from console --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- using jQuery --> <link href="simpleImageV2.css" rel="stylesheet" type="text/css"> <script src="jquery-3.3.1.min.js"></script> <script src="simpleImagesV2.js"></script> </head> <body bgcolor="black" onload="preLoadImages(); init();"> <div id="setSize"> <img name="campus_pic" src="images/fall_1_480x640.png" width="480" height="640"> </div> <br /> <br /> <div id="images"></div> <button id="startShow">Start the Show</button> <button id="stopShow">Stop the Show</button> </body> </html>