tinfanide Posted August 10, 2011 Share Posted August 10, 2011 function slideCtrl(ctrl){ if(ctrl==2){ autoImage(); ctrl = -2; dirn = -1; } else if(ctrl==-2){ clearInterval(fadeTimer); clearTimeout(showTimer); ctrl = 2; } } <a id="autoImage" onclick="slideCtrl(2)" href="#" title="Play / Pause">AUTO</a> Function slideCtrl is the switch control of an auto-play image slideshow. Tested. The autoImage function works well.But I wonder if I can use the anchor link as a button to either switch on or off the slideshow.I set 2 as on, -2 as off.Is there any workaround for the parameter in the inline javascript in the anchor link to work binary? Link to comment Share on other sites More sharing options...
Drycodez Posted August 10, 2011 Share Posted August 10, 2011 <a href="java script:slideCtrl(2)"/> Link to comment Share on other sites More sharing options...
tinfanide Posted August 10, 2011 Author Share Posted August 10, 2011 <a href="java script:slideCtrl(2)"/> Well, it seems working the same as onclick does.It does not stop the slideshow either when AUTO is clicked again.My intention was to use ctrl=-2 to switch off the function while I keep one single button to do the on and off thing. Link to comment Share on other sites More sharing options...
Drycodez Posted August 10, 2011 Share Posted August 10, 2011 var ctrl=1; function slideCtrl(){ if(ctrl==1){ autoImage(); ctrl = 0; } else if(ctrl==0){ clearInterval(fadeTimer); clearTimeout(showTimer); ctrl = 1; } } <a id="autoImage" href="java script:slideCtrl()" title="Play / Pause">AUTO</a> EDIT: the previous code will not work coz (2) will always be pass in. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 10, 2011 Share Posted August 10, 2011 It may be easiest to use a global variable to keep track of whether it is currently playing. This will only work if you only have one slideshow on the page, but since you're using globals for other things I guess that's not a problem. var slideshow_playing = false; function slideCtrl(){ if(slideshow_playing){ clearInterval(fadeTimer); clearTimeout(showTimer); slideshow_playing = false; } else{ autoImage(); slideshow_playing = true; dirn = -1; } } Since the intervals are already global, you can also use them instead: function slideCtrl(){ if(showTimer){ clearInterval(fadeTimer); clearTimeout(showTimer); } else{ autoImage(); dirn = -1; } } Link to comment Share on other sites More sharing options...
tinfanide Posted August 11, 2011 Author Share Posted August 11, 2011 It may be easiest to use a global variable to keep track of whether it is currently playing. This will only work if you only have one slideshow on the page, but since you're using globals for other things I guess that's not a problem.Since the intervals are already global, you can also use them instead: function slideCtrl(){ if(showTimer){ clearInterval(fadeTimer); clearTimeout(showTimer); } else{ autoImage(); dirn = -1; } } The first one works well. But the second one doesn't.In IE8 console, it says fadeTimer in if(fadeTimer) undefined and it cannot stop the slide but can start it.Here's the full script:<!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", cap: "", url: "", des: "" }; img[img.length] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png", cap: "", url: "", des: "" }; img[img.length] = {src: "http://www.techlifeweb.com/facebook_logo.jpg", cap: "", url: "", des: "" }; img[img.length] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg", cap: "", url: "", des: "" }; img[img.length] = {src: "http://scm-l3.technorati.com/10/05/10/12671/twitter-logo-5.jpg", cap: "", url: "", des: "" }; img[img.length] = {src: "http://www.easyquestion.net/learninginadigitalworld/wp-content/uploads/2009/06/ms-office-logo.jpg", cap: "", url: "", des: "" }; 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;var showTimer;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; } function slideCtrl(){ if(showTimer){ clearInterval(fadeTimer); clearTimeout(showTimer); } else{ autoImage(); dirn = -1; } } </script></head><body><img id="imgSlides" src="" style="width: 500px; height: 500px;" alt="" /><br /><a id="autoImage" href="java script: slideCtrl()" title="Play / Pause">AUTO</a></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 11, 2011 Share Posted August 11, 2011 Give the variable a value to start with:var showTimer = 0; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.