tinfanide Posted August 8, 2011 Share Posted August 8, 2011 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> var imgs = new Array(), current=0; var t; window.onload = function so_init() { if(!document.getElementById || !document.createElement){ return; } imgs = document.getElementById("imageContainer").getElementsByTagName("img"); for(i=1;i<imgs.length;i++){ imgs[i].xOpacity = 0; } imgs[0].style.display = "block"; imgs[0].xOpacity = .99; document.getElementById("imageContainer").onclick = function(){ var a = 0; if(a==0){so_xfade(); a=1;} else if(a==1) {clearTimeout(t)} } } function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1] ? current+1 : 0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; imgs[nIndex].style.display = "block"; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; t = setTimeout(so_xfade,1000); } else { t = setTimeout(so_xfade,100); } } function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; } </script> <style> #imageContainer { height:309px; } #imageContainer img { display:none; width:500px; height:309px; position:absolute; top:0; left:0; } </style> </head> <body> <div id="imageContainer"> <img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" /> <img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" /> <img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" /> <img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" /> </div> </body> </html> How can be that when the image is re-clicked, the slide stops and stays on the current picture?I've tried to use variable to control it but it does not work. Link to comment Share on other sites More sharing options...
JamesB Posted August 8, 2011 Share Posted August 8, 2011 else if(a==1) {clearTimeout(t)} a will always be 0 with your current code, as you are setting it to 0 in the onclick function.move "var a = 0;" outside that function, eg in the line before it, and if you don't move it to global scope (where "var t;" is) then remove the word 'var' from it to make it global. Link to comment Share on other sites More sharing options...
tinfanide Posted August 8, 2011 Author Share Posted August 8, 2011 else if(a==1) {clearTimeout(t)} a will always be 0 with your current code, as you are setting it to 0 in the onclick function.move "var a = 0;" outside that function, eg in the line before it, and if you don't move it to global scope (where "var t;" is) then remove the word 'var' from it to make it global. Yes, I see. Thanks. I realise now I've got the global variable part a bit messed up. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.