JavaScript - show/ hide function
Question
I am new to JavaScript and I do not know how to approach this homework assignment -
"modify the page to hide all the images until the “start” button is clicked. Once clicked the start button should become the stop button and display the word “stop” and when clicked hide the images. Once hidden that same button should become the start button and display the word “start” and act again like the start button. Notice there is a single button that changes the text and what is does depending on whether the show is currently stopped or started."
I know i am supposed to use the show/hide effects, but I don't really know how to apply them to the code?
<!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");
}
}
1 answers
solution1
1 ACCPTED 2019-04-04 20:30:24
You can use jQuery for that like below :
/*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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.