Question

I am working on a slider to rotate/fade Divs without using jQuery.

This is what I got so far: http://jsfiddle.net/AlexHuber/V2Avd/24/

It rotates once through the array of 4 Divs, continues to the first Div and then stops.

Any ideas? Thanks, Alex

var box=document.getElementById("box");
var index=box.children.length-1;
var active;
var next;

box.children[0].style.zIndex="1";
box.children[1].style.zIndex="1";
box.children[2].style.zIndex="1";
box.children[3].style.zIndex="1";

var timer1 = setInterval(function(){
    active = box.children[index];
    next = (index > 0) ? box.children[index-1] : box.children[box.children.length-1];

    active.style.zIndex = "3";
    next.style.zIndex = "2";

    var opa = 1.0;
    var timer2 = setInterval(function(){
        if (opa <= 0){    
            active.style.zIndex="1";
            active.style.opacity="1.0";
            next.style.zIndex="3";
            clearInterval(timer2);            
        }
        else {
            active.style.opacity = opa;
            opa -= 0.1;
        }
    }, 50);      
    index -= 1;
    if (index < 0) 
        index = box.children.lenght-1;            
}, 2000);
Was it helpful?

Solution

On your second from last line change .lenght-1 to .length-1

that makes the divs rotate indefinitely. I'm assuming that's what you want.

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