tinfanide Posted August 10, 2011 Share Posted August 10, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>JS: Image Slider</title><script type="text/javascript"> var img = []; img[img.length] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png"}; img[img.length] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png"}; img[img.length] = {src: "http://www.techlifeweb.com/facebook_logo.jpg"}; img[img.length] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg"}; img[img.length] = {src: "http://scm-l3.technorati.com/10/05/10/12671/twitter-logo-5.jpg"}; img[img.length] = {src: "http://www.easyquestion.net/learninginadigitalworld/wp-content/uploads/2009/06/ms-office-logo.jpg"}; for (var imgs=[], i=0; i<img.length; i++){ imgs[i] = new Image(); imgs[i].src = img[i].src; } var curPic = 0;var fadeTimer;var speed = 50;var opacStep = 0.5;var dirn = -1;var curOpac = 10;var ctrl;function autoImage(){ if(fadeTimer){clearInterval(fadeTimer);} fadeTimer = setInterval(setOpacity,speed); function setOpacity() { curOpac += opacStep * dirn; if (curOpac < 0){ swapImage(); curOpac = 0; dirn = 1; autoImage(); return; } if (curOpac > 10){ curOpac = 10; clearInterval(fadeTimer); dirn = -1; showTimer = setTimeout(autoImage,1000); return; } if (imgSlider.style.opacity=="string"){ imgSlider.style.opacity = curOpac/10; } else { imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')'; imgSlider.style.MozOpacity = curOpac/10; } } function swapImage(){ curPic = (++curPic > img.length-1) ? 0 : curPic; imgSlider.src = img[curPic].src; } }window.onload = function(){ imgSlider = document.getElementById('imgSlides'); imgSlider.src = img[curPic].src; ctrl = 2; document.getElementById("autoImage").onclick = function(){ if(ctrl==2){ autoImage(); ctrl = -2; } else if(ctrl==-2){ clearInterval(fadeTimer); clearTimeout(showTimer); ctrl = 2; } }; }</script></head><body><img id="imgSlides" src="" style="width: 500px; height: 500px;" alt="" /><br /><a id="autoImage" href="#" title="Play / Pause">AUTO</a></body></html> To enable the image slider to be on or off with a click on the same button (AUTO), I use the variable ctrl to control the switch.It works well when the image is fading in or fading out when I press the AUTO button (that means it is on or off as expected);But the problem exists whenI press AUTO when the image is neither fading in nor out (the image's opacity reach full and setTimeout starts keeping the image on the slider for 1 second) [variable showTimer];on that occassion, it does not stop itself. To fix it, I put clearTimeout in the else if statement.But other problem exists:That is when the image is fading in, I press AUTO to stop it and as soon as I press AUTO to resume it,the image skips the setTimeout and starts fading out.How could I avoid it skipping the setTimeout?I hope I'm expressing it clearly. Please test it in the console and you may see what I mean. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.