so...
ive created a random slide show of 3 panels side by side, all of them with a random time intervals between each slide. it all works great.
im now looking to create a user controlled start/stop option for EACH panel, based on an onclick over each image - and thats where Im having difficulty. can anyone help me out? much appreciated...
//THIS PART WORKS FINE:
function allPlantPick(plantId)
{
setTimeout(
function()
{
plantPick(plantId);
allPlantPick(plantId);
},
plantTimer()
);
}
for(var i = 1; i < 4; ++i)
{
allPlantPick('plant' + i);
}
/*function allPlantPick(){
alert (plantTimer());
setInterval("plantPick('plant1')", plantTimer());
setInterval("plantPick('plant2')", 1000);
setInterval("plantPick('plant3')", 1000);
}*/
function plantTimer() {
var plantNum = (Math.random()*500) + 1000;
return(plantNum);
}
function plantPick(myFoo){
var plantChoices=["images/p1.jpg","images/p2.jpg","images/p3.jpg","images/p4.jpg","images/p5.jpg","images/p6.jpg","images/p7.jpg"];
document.getElementById(myFoo).style.backgroundImage = "url(" + plantChoices[ Math.floor(Math.random()*plantChoices.length) ] + ")";
}
//THIS PART DOESNT WORK SO WELL:
var q = 1;
function pStopGo() {
if (q == 1) {
stopPlant();
q = 2;
}
else if (q == 2) {
goPlant();
q = 1;
}
function stopPlant(){
window.clearTimeout(startStop);
}
function goPlant(){
allPlantPick();
}
}