This is written in Javascript/HTML5 I need help getting my photo timer function
ID: 3754059 • Letter: T
Question
This is written in Javascript/HTML5
I need help getting my photo timer function to work correctly! We are to add to our existing photo gallery by adding a timer that will change the source of your large image every 3 seconds. All of my source images are in an array below. I need to fix my scrollPhotos() function but I am kinda stuck and nothing is happening and my displayImages() function is not working as well now when it did before!
Code Below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Photo Gallery with Timer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<script>
var arrayImages = ["images/image1.jpg", "images/image2.jpg", "images/image3.jpg"]
var imagePosition = 0;
function scrollPhotos () {
imagePosition += 1;
if (imagePosition = arrayImages.length)
imagePosition = 0;
}
var image = document.getElementById("mainImage");
image.src = arrayImages[imagePosition];
setInterval('scrollPhotos ()', 3000);
}
scrollPhotos();
function displayImages () {
for (i = 0; i < arrayImages.length; i++) {
document.write("<li><img src="" + arrayImages[i] + "" width='200' height='200'/></li>");
}
}
function swapImage (newImage) {
var nameOfImage;
nameOfImage = document.getElementById('mainImage');
nameOfImage.src = newImage;
}
</script>
<div id="mainImgContainer">
<img src="images/image1.jpg" id="mainImage" alt="Main Image Displayed">
</div>
<div id="subImgContainer">
<ul>
<script>displayImages();</script>
</ul>
</div>
</body>
</html>
Explanation / Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Photo Gallery with Timer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<img id="image1" />
</div>
<script>
var arrayImages = [
'images/image1.jpg',
'images/image2.jpg',
'images/image3.jpg'],
curIndex = 0;
imgDuration = 3000;
function displayImages() {
for (i = 0; i < arrayImages.length; i++) {
document.write("<li><img src="" + arrayImages[i] + "" width='200' height='200'/></li>");
}
}
function swapImage (newImage) {
var nameOfImage;
nameOfImage = document.getElementById('mainImage');
nameOfImage.src = newImage;
}
function scrollPhotos() {
document.getElementById('image1').src = arrayImages[curIndex];
curIndex++;
if (curIndex == arrayImages.length) { curIndex = 0; }
setTimeout("scrollPhotos()", imgDuration);
}
scrollPhotos();
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.