I'm trying to build a slide show that creates an array of variables
(thumb1, thumb2, thumb3, etc) and assigns a src and a href to the
current slide the when the thumbnail is clicked. I have it working
fine when I explicitly write it out, but I'm trying to build a look
that will dynamically create the variable name, and then set the index
the linkArray and the imageArray. It's building it fine, the src and
href both change, however they don't change as expected. Basically
i'll get thumb0 with the src for 1 and the href for some other index.
I can't figure out what i'm doing wrong! i'm frustrated, but I'm sure
it's something simple I'm overlooking. I'm pretty new to writing the
code from scratch.
here's the code i'm using, i would appreciate any help anyone could
offer:
setInterval(changeImage,3000);
//set variables for main Slide show
var currentSlide = document.getElementById("currentSlide");
var currentLink = document.getElementById("currentLink");
var imageArray =
["image1.JPG","image2.JPG","image3.JPG","image4.JPG"];
var linkArray = ["link1.html","link2.html","link3.html","link4.html"];
var imageIndex = 0;
//Changes current slide automatically
function changeImage() {
currentSlide.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
//set variables for thumbnail strip
var thumbnails = document.getElementById("thumbnails");
var dynamicThumbs = document.getElementById("dynamicThumbs");
var thumbnailArray = new Array();
for (i=0; i<imageArray.length; i++) {
thumbnailArray[i] = document.createElement("img");
dynamicThumbs.appendChild(thumbnailArray[i]);
thumbnailArray[i].setAttribute("src",imageArray[i]);
thumbnailArray[i].setAttribute("width",100);
thumbnailArray[i].onclick = function(){
currentSlide.setAttribute("src", imageArray[i]);
currentSlide.setAttribute("href", linkArray[i]);
if (i < imageArray.length){
imageIndex++;}
else {
imageIndex = 0;
};
};
}
-- (thumb1, thumb2, thumb3, etc) and assigns a src and a href to the
current slide the when the thumbnail is clicked. I have it working
fine when I explicitly write it out, but I'm trying to build a look
that will dynamically create the variable name, and then set the index
the linkArray and the imageArray. It's building it fine, the src and
href both change, however they don't change as expected. Basically
i'll get thumb0 with the src for 1 and the href for some other index.
I can't figure out what i'm doing wrong! i'm frustrated, but I'm sure
it's something simple I'm overlooking. I'm pretty new to writing the
code from scratch.
here's the code i'm using, i would appreciate any help anyone could
offer:
setInterval(changeImage,3000);
//set variables for main Slide show
var currentSlide = document.getElementById("
var currentLink = document.getElementById("
var imageArray =
["image1.JPG","image2.JPG","
var linkArray = ["link1.html","link2.html","
var imageIndex = 0;
//Changes current slide automatically
function changeImage() {
currentSlide.setAttribute("
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
//set variables for thumbnail strip
var thumbnails = document.getElementById("
var dynamicThumbs = document.getElementById("
var thumbnailArray = new Array();
for (i=0; i<imageArray.length; i++) {
thumbnailArray[i] = document.createElement("img");
dynamicThumbs.appendChild(
thumbnailArray[i].
thumbnailArray[i].
thumbnailArray[i].onclick = function(){
currentSlide.setAttribute("
currentSlide.setAttribute("
if (i < imageArray.length){
imageIndex++;}
else {
imageIndex = 0;
};
};
}
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To view this discussion on the web visit https://groups.google.com/d/msg/javascript-information/-/9-fiyUCPemMJ.
To post to this group, send email to javascript-information@googlegroups.com.
To unsubscribe from this group, send email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/javascript-information?hl=en.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.