Javascript loop, counter equals 0 two times in a loop -
so working on little slideshow script. problem i equals 0 2 times in loop. in following code piece of code:
for (var = 0; children.length > i; i++ ) { (function(children, i, time){ settimeout (function(){ // fade out current slide settimeout(function(){ fadeitout(children[i]); },2000); // wait execution of if statement var nextslide = window.setinterval(function(){ // if current slide not first slide // , if slide before current slide has faded out if(children[i-1] && children[i-1].style.opacity === "") { // show next slide children[i].style.display = 'block'; nextslide = window.clearinterval(nextslide); } // if current slide first slide else if (i === 0) { // show children[i].style.display = 'block'; } },1); }, time); })(children, i, time) time += 2000; } this whole script:
var magic = window.setinterval(function(){ if (document.readystate === "complete") { // globals var children = document.getelementbyid('slide-container').children, time = 2000; // fadeout function function fadeitout (element) { var child = element; // current opacity function opacityno (element) { if (element.style.opacity === "") { return 1; } else { return element.style.opacity; } }; child.style.opacity = opacityno(child); //decrase opacity 0 1 var decrase = window.setinterval(function(){ child.style.opacity -= 1/100; if (child.style.opacity <= 0.01) { child.style.opacity = ""; child.style.display = 'none'; decrase = window.clearinterval(decrase); } },1); }; // start show (var = 0; children.length > i; i++ ) { (function(children, i, time){ settimeout (function(){ // fade out current slide settimeout(function(){ fadeitout(children[i]); },2000); // wait execution of if statement var nextslide = window.setinterval(function(){ // if current slide not first slide first // , if slide before current slide has faded out if(children[i-1] && children[i-1].style.opacity === "") { // show next slide children[i].style.display = 'block'; nextslide = window.clearinterval(nextslide); } // if current slide first slide else if (i === 0) { // show children[i].style.display = 'block'; } },1); }, time); })(children, i, time) time += 2000; } // end show console.log(time); magic = window.clearinterval(magic); } else { console.log("..."); } }, 1000); the point waits until previous slide faded out before showing next slide.
i use along html: `
<head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <script type="text/javascript" src="slideshow.js"></script> </head> <body> <ul id="slide-container"> <li style="display: none;"><img src="http://i.imgur.com/8qbcyzc.jpg"></li> <li style="display: none;"><img src="http://i.imgur.com/oxmtftf.png"></li> <li style="display: none;"><img src="http://i.imgur.com/jtm6yqg.jpg"></li> </ul> </body> `
when run see when first image has faded out, appears again.
please see this jsfiddle
it working removing else if statement verify if i === 0. verification must done in previous if statement.
if((children[i-1] && children[i-1].style.opacity === "") || === 0) { // show next slide children[i].style.display = 'block'; window.clearinterval(nextslide); } i'm suggesting play around z-index placing next image behind active one. prevent background shown , transition nicely.
Comments
Post a Comment