Jump to content

javascript parameters passing


tinfanide
 Share

Recommended Posts

	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

<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

	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.

Edited by O. Samuel
Link to comment
Share on other sites

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

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>

Edited by Tin
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...