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.

HTML Code:

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.

HTML Code:

.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

Code:

<!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?

Thread: rotating throught divs

Thread Tools

Search Thread

rotating throught divs

Similar Threads

Iframe-divs: a technique for letting divs overlay anything we want

Processing form throught ajax

AnimatedCollapse divs - losing persistence between 2 pages with collapsible divs

Layered DIVs / Hide All Other DIVs When DIV is Selected

Animated Collapsible DIVS -additional DIVS float aside 3rd DIV

Bookmarks

Bookmarks

Posting Permissions