...

View Full Version : Rotating Image Trouble



Detroit Iron
09-01-2011, 11:58 PM
Hello, I'm new to this forum. I'm not new to Javascript, but have no formal training. Looking to learn lots on this forum.

Im trying to deploy a Javascript code trio of images. The code uses a CSS file, and a separate JS file. I have a couple issues Id like input on.

The first is the images loop through once, per div. Id like each div to loop independently, and infinitely on page load.

Seccond: this page doesnt show in IE... at all. Only FireFox. Any clues? Thank you all!!!

My page: http://www.cityofcampbell.com/_indexRotation.htm

JS [CODE]
$(window).load(function() { //start after HTML, images have loaded

var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;

//interval between items (in milliseconds)
var itemInterval = 500;

//cross-fade time (in milliseconds)
var fadeTime = 500;

//count number of items
var numberOfItems = $('.rotating-item').length;

//set current item
var currentItem = 0;

//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

//loop through the items
var infiniteLoop = setInterval (function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);

if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);

}, itemInterval);
}
};

InfiniteRotator.init();

});
[CODE]

CSS [CODE]
#rotator1 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;

}

#rotator2 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;

}

#rotator3 {
position: relative;
width: 119px;
height: 87px;
}
.rotating-item {
display: none;
position: absolute;
[CODE]

Old Pedant
09-02-2011, 12:14 AM
First of all, you need to use [/CODE] at the end of your code, not [CODE].

Second, not to quibble, but you are using jQuery and there *is* a separate forum for that.
I don't see anything at all wrong with the JavaScript code (and since it works in FF, surely there isn't) but there may be something else you need to do in IE to make that jQuery work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum