I am on day 1 of javascript and dynamic html and already frustration is setting in. My first "project" is a simple slideshow/gallery page where clicking the thumbnail replaces the main image with the corresponding picture and that works great.
Clicking the 1st thumbnail is supposed to trigger a simple slideshow using a for loop. It loops okay but it needs some sort of duration control. I have inserted a simple alert to test but I need some form of delay. I have tried another for next loop but it still seems to need an alert to delay the loop. Obviously I am doing something wrong - any pointers please? I have also tried
var t=setTimeout("changepic(picvalue)",3000); but no joy
code is:
Clicking the 1st thumbnail is supposed to trigger a simple slideshow using a for loop. It loops okay but it needs some sort of duration control. I have inserted a simple alert to test but I need some form of delay. I have tried another for next loop but it still seems to need an alert to delay the loop. Obviously I am doing something wrong - any pointers please? I have also tried
var t=setTimeout("changepic(picvalue)",3000); but no joy
code is:
Code:
<html>
<head>
<title>Dynamic Styles</title>
<script language="JavaScript">
function changepic(txt){
document.getElementById("bigimage").src=txt;
}
function pauseit(tim){
alert(tim);
for(t=0; t<tim; t++) {
}
}
function slideit(){
for(i=1; i<10; i++) {
var picval = "images/"+i+".gif";
changepic(picval);
pauseit(10000000);
}
}
</script>
</head>
<img id="bigimage" src="images/0.gif">
<hr>
<img src="images/0.gif" height="50" onclick="slideit()">
<img src="images/1.gif" height="50" onclick="changepic('images/1.gif')">
<img src="images/2.gif" height="50" onclick="changepic('images/2.gif')">
<img src="images/3.gif" height="50" onclick="changepic('images/3.gif')">
<img src="images/4.gif" height="50" onclick="changepic('images/4.gif')">
<img src="images/5.gif" height="50" onclick="changepic('images/5.gif')">
<img src="images/6.gif" height="50" onclick="changepic('images/6.gif')">
<img src="images/7.gif" height="50" onclick="changepic('images/7.gif')">
<img src="images/8.gif" height="50" onclick="changepic('images/8.gif')">
<img src="images/9.gif" height="50" onclick="changepic('images/9.gif')">
</body>
</html>
