Hello. I need help creating a slideshow using javascript and html. The Your slid
ID: 3852931 • Letter: H
Question
Hello.
I need help creating a slideshow using javascript and html. The Your slideshow file must meet the following specifications:
-----Include the JavaScript in the Head section of the HTML file.
-----Declare a new Array object with any name other than season.
-----A global variable is declared and initialized to 0. Use any name other than indx.
-----A global variable is declared and initialized for 3 seconds. Use any name other than timeDelay.
----Use the Image() constructor to preload and cache your images. Each new image object should be assigned to an element of your array. You must use 5 images in your array.
-----Associate your 5 images files to the src property for each element of the array.
-----Define a function to be called when the onMouseOver event handler is triggered when the user moves the mouse onto the image. Name the function anything other than changeSeason(). The images should cycle as long as the user’s mouse remains on the image.
-----Set up the original image to be replaced from the images in the season array.
-----Make sure that the window object’s setTimeout() method will call the necessary function for changing the images every 3 seconds.
-----Define a function to be called when the onMouseOut event is triggered by the mouse moving away from the image. Name the function anything other than stopShow().
-----Clear the setTimeout() method. (3 Points) l. Use the pseudo URL, JavaScript:void(null) to deactivate the link and ensures that if there is a return value from the event, it will be nullified. Because neither of the events returns anything, it suffices to use the protocol as JavaScript.
Explanation / Answer
<!DOCTYPE html>
<html>
<head><title>Slide Show</title>
<script type="text/javascript">
var loop=0;
var delay=3;
var my_image1 = new Image();
var my_image2 = new Image();
var my_image3 = new Image();
var my_image4 = new Image();
var my_image5 = new Image();
var ar = new Array(my_image1,my_image2,my_image3,my_image4,my_image5);
function load_image()
{
// load the image
ar[0].src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d';
ar[1].src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZtjprGwxPE5FVcY72h1MWxvVVSiW7RFHmJ6DZ9G1lf0YOr-vV';
ar[2].src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUSaoTcU7EiRBKlB26__J_YhAXK5WUjffGO9lQZ5bHgJs5Boybzg';
ar[3].src = 'https://wallpaperbrowse.com/media/images/free_high_resolution_images_for_download-1.jpg';
ar[4].src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHG9N_StKDx4rNaA44VhAsbFNza5mHitRGoivhULhzAQx46FBxoA';
}
function startSlideShow(){
document.slides.src=ar[loop].src;
if(loop < ar.length - 1) loop++; else loop = 0;
timer = setTimeout("startSlideShow()",delay*1000);
}
function stopSlideShow(){
clearTimeout(timer);
}
load_image();
</script>
</head>
<body>
<a href="#"
>
<img name="slides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHG9N_StKDx4rNaA44VhAsbFNza5mHitRGoivhULhzAQx46FBxoA" width="400" height="200" />
</a>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.