Web Analytics Made Easy -
StatCounter Rotating Image Trouble - CodingForum

Announcement

Collapse
No announcement yet.

Rotating Image Trouble

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Rotating Image Trouble

    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.

    I’m 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 I’d like input on.

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

    Seccond: this page doesn’t 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]

  • #2
    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.
    Be yourself. No one else is as qualified.

    Comment

    Working...
    X