max7
asked on
Use only javascript to cycle through images
Greetings,
I'm trying to get the following code to work, but I keep getting a ton of undefined errors when it comes to the array imageCount.
I'm trying to write this so it will be handle any number of images.
Please let me know where I'm going wrong and why.
I'm trying to get the following code to work, but I keep getting a ton of undefined errors when it comes to the array imageCount.
I'm trying to write this so it will be handle any number of images.
Please let me know where I'm going wrong and why.
<!DOCTYPE HTML>
<html>
<body onload="init()">
<div id="slideshow">
<div class="image"><img src="myimage1.jpg"></div>
<div class="image" style="display:none"><img src="src="myimage2.jpg"></div>
<div class="image" style="display:none"><img src="src="myimage3.jpg"></div>
<div class="image" style="display:none"><img src="src="myimage4.jpg"></div>
</div>
<script>
// all your Javascript code goes here //
function init() {
setInterval("showImages()", 2000);
}
function showImages(){
var image = document.getElementsByTagName('img').length;
var index = 0;
var imageCount = new Array();
for( var i = 0; i < image; i++){
if(image != 0){
imageCount.push(document.getElementsByTagName('img')[i]);
imageCount[i].style.display = 'none';
imageCount[index].style.display ='none';
index = (index + 1)% imageCount[index].length;
imageCount[i].style.display = 'block';
}
}
}
</script>
</body>
</html>
ASKER
Not quite clear on what you want to do - show one image at a time?
Exactly what I want to do
This is for sure not correct
imageCount[index].length;
there is nothing with length in the array...
Correct, but I couldn't figure out why not since I thought the following code would put the img elements inside that array:
var imageCount = new Array();
for( var i = 0; i < image; i++){
if(image != 0){
imageCount.push(document.getElementsByTagName('img')[i]);
Is the problem that I didn't correctly write my for loop? I ask because I see that you did:
for (var i=0, n=images.length; i<n; i++)
at best, I think would have done i<images.length; but I don't think I ever would have thought of n here. I thought i would represent the image elements ... what am I missing?
Also, comparing your script to mine, is creating a new array and putting the image elements inside of it even necessary? I thought it was but it appears not.
I noticed too that in your script, you used global variables ... is that at least part of the reason I was getting undefined script errors?
If the idea is to show one and hide the previous, then I would do - notice the usage of onload
Two things:
a) unless I remove the surrounding div tags around the img tags, your script will only show the first image and none of the others. How can I keep those div tags and still have it work?
b) you pointed out onload ... is that a better choice than init and if so, why?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks very much for your help, yet again. Good to know you're still on EE, have a wonderful day :)
This is for sure not correct
imageCount[index].length;
there is nothing with length in the array...
Here is the beginning of your script, somewhat optimised
function init() {
setInterval(showImages, 2000); // using quotes creates an implicit eval - not best practice
}
function showImages(){
var images = document.getElementsByTagN
for (var i=0, n=images.length; i<n; i++) {
If the idea is to show one and hide the previous, then I would do - notice the usage of onload
Open in new window