Log in

View Full Version : rotating throught divs


riptide
10-06-2012, 08:02 AM
I'm trying to make something similar to a rotating banner with DIVs
I have a code I tried made but it gives weird looping. It won't display one image at time. I cycles between 1 image 3, none 2 and 4 being displayed at once.
I think the if and else are not in sink.


window.onload=function() {

timer = setInterval('flip()', 2500);


}



function flip(){
var div = document.getElementById('displaybox');
var divs = div.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {
if(divs[i].style.display != 'block') {
divs[i].style.display = 'block';
}

else {divs[i].style.display = 'none';i++

}

}
}


here is the CSS and html. I know the function is setting everything to display block. I would expect the else clause to remove images 1 by 1.
If it was doing the opposite of what I wanted I could fix it. Strangely I can't find similar scripts on the web.



.window{
display:none;

}


<div id="displaybox">

<div class="window"><span class="dis"></span><img id="image1" src="test2.gif"/></div>

<div class="window"><span class="dis"></span><img id="image2" src="test1.gif"/></div>

<div class="window"><span class="dis"></span><img id="image3" src="test3.png"/></div>

<div calss="window"><span class="dis">4</span><img id="image4" src=""/></div>

<div class="window"><span class="dis">5</span><img id="image5" src=""/></div>


</div>
vwphillips
10-06-2012, 12:33 PM
incrementing i when the display is none misses out a div as i is incremented twice

better


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
window.onload=function() {

flip(0);

}



function flip(cnt){
var div = document.getElementById('displaybox'),divs = div.getElementsByTagName('div'),i = 0;
for (; i < divs.length; i++) {
divs[i].style.display = cnt!=i?'none':'block';
}
cnt=cnt=++cnt%divs.length; // increment the count
timer = setTimeout(function(){ flip(cnt); },2500);
}
/*]]>*/
</script></head>

<body>
<div id="displaybox">

<div class="window"><span class="dis"></span><img id="image1" width="100" height="100" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"/></div>

<div class="window"><span class="dis"></span><img id="image2" width="100" height="100" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"/></div>

<div class="window"><span class="dis"></span><img id="image3" width="100" height="100" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif"/></div>

<div calss="window"><span class="dis">4</span><img id="image4" width="100" height="100" src=""/></div>

<div class="window"><span class="dis">5</span><img id="image5" width="100" height="100" src=""/></div>


</div>
</body>

</html>
riptide
10-06-2012, 09:39 PM
If I had changed it to visibility: hidden would that have still cause problem with the increment. I knew something was wrong with the incrementation but I couldn't catch the pattern. Why does it do this?