Question

I have a kind of a image rotator that scrolls through an array of images via javascript within a certain interval, and now I have added some style to each current image. But that only works if I myself hover over the items/click on the items, whenever the script swaps images on auto, nothing happens stylistically to the images. So what I want to know is how I can use the same effect on the auto script.

Here is the code

*HTML *

<div class="container-thumbs">
<div><a><img src=".jpg" /></a></div>
<div><a class="active"><img src=".jpg" /></a></div> 
<div><a><img src=".jpg" /></a></div>
</div>

CSS

.container-thumbs{
width: 300px; height: 25; font-size: 18px;
}
.container-thumbs a{
list-style: none; float: left; margin-right: 4px; padding: 5px;
}
.container-thumbs div a:hover, .container-thumbs div a.active {
background-color: #f90;
}

Javascript

(function(){
var rotator = document.getElementById('bigImage');
var imageDir = '../images/headers/';
var delayInSeconds = 5;     
var images = ['.jpg', '.jpg', '.jpg', '.jpg', '.jpg',     
'.jpg', '.jpg'];
var num = 0;
var changeImage = function() {
var len = images.length;
bigImage.src = imageDir + images[num++];
if (num == len)
{num = 0;} 
};
setInterval(changeImage, delayInSeconds * 1000);
})();

No correct solution

OTHER TIPS

i think u have to replace bigImage with rotator because the u getTheImage

var rotator = document.getElementById('bigImage');
// then u dont use it
bigImage.src = imageDir + images[num++];
// so try to change to
rotator.src=imageDir + images[num++];

goodluck

From your html there is no element with an ID of bigImage, so I cannot see how this works at all.

I have added the ID in the middle image as below:

<div class="container-thumbs">
    <div><a><img src=".jpg" /></a></div>
    <div><a class="active"><img src=".jpg" id="bigImage" /></a></div> 
    <div><a><img src=".jpg" /></a></div>
</div>

That should work.

One other thing, is there a good reason not to use jQuery here? I'd strongly recommend it for cross-browser compatibility if nothing else.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top