I am going to write some codes to make my the \"previous\" and \"next\" buttons

Question

I am going to write some codes to make my the "previous" and "next" buttons work in my website. Here is the example for the initial imamge, please help me write/ revise the codes of function previousSlide() & function nextSlide() & function setFocus(img)

var imageSources = [
"https://upload.wikimedia.org/wikipedia/commons/d/d8/Affenpinscher_%28Monkey_Terrier%29_from_1915.JPG",
"https://upload.wikimedia.org/wikipedia/commons/b/be/All_Alaska_Sweepstakes_Race.JPG",
"https://upload.wikimedia.org/wikipedia/commons/d/db/Ambulance_Dog.JPG",
"https://upload.wikimedia.org/wikipedia/commons/7/7d/American_Bloodhound_from_1915.JPG"
];

var focusImageIndex = 0;

// what to do upon the page first loading:
// set the focus image
// set the thumbnail images
function initialize() {
var focusImage = document.getElementById("focus");
var thumbBoxes = document.getElementsByClassName("thumb-img");
var i = 0;
while (i < thumbBoxes.length) {
thumbBoxes[i].src = imageSources[i];
i = i + 1;
}
focusImage.src = imageSources[focusImageIndex];
}

function previousSlide() {
// ...
}

function nextSlide() {
// ...
}

function setFocus(img) {
// ...
}

Explanation / Answer

var imageSources = [
"https://upload.wikimedia.org/wikipedia/commons/d/d8/Affenpinscher_%28Monkey_Terrier%29_from_1915.JPG",
"https://upload.wikimedia.org/wikipedia/commons/b/be/All_Alaska_Sweepstakes_Race.JPG",
"https://upload.wikimedia.org/wikipedia/commons/d/db/Ambulance_Dog.JPG",
"https://upload.wikimedia.org/wikipedia/commons/7/7d/American_Bloodhound_from_1915.JPG"
];
var focusImageIndex = 0;

// what to do upon the page first loading:
// set the focus image
// set the thumbnail images
function initialize() {
var focusImage = document.getElementById("focus");

/*
have one element with id "thumb-img"
get that element whenever needed and set the image over that, to whatever you want
*/
var thumbImg = document.getElementById("thumb-img");
thumbImg.src = imageSources[0]; //initially showing the first image in the list
focusImage.src = imageSources[focusImageIndex]; //not sure what this widget is for
}

function previousSlide() {
var slidesCount = imageSources.length;

focusImageIndex = (focusImageIndex + 1) % slidesCount;
var image = imageSources[focusImageIndex];
var thumbImg = document.getElementById("thumb-img");
thumbImg.src = image;
}
function nextSlide() {
//if the focusImageIndex - 1 is less than zero, go to last one in list
focusImageIndex = ((focusImageIndex - 1 >= 0) ? (focusImageIndex - 1) : imageSources.length);

var image = imageSources[focusImageIndex];
var thumbImg = document.getElementById("thumb-img");
thumbImg.src = image;

}
function setFocus(img) {
//not clear on what you want to do here
}

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.