change script: Loop through divs every X seconds PLUS select DIV manually by clicking button

on the page Show and hide divs at a specific time interval using jQuery

there is a script to Loop through DIVs (show 1 DIV after the other while hiding the others).

it's called "Loop through divs every 10 seconds "

It works fine, but i need to select a special DIV with a click on a special button TOO.

There开发者_运维技巧 are 3 DIVS with headline 1 - 2 - 3 (the active is RED) The Loop-Script changes the DIVs and shows them right. BUt whe click on 2 the DIV Nr. 2 should become active. (and the Loop should go on with Nr. 3 - 1 - 2....

simply: how do I tell the script "counter = 3" when clicking on button 3

http://nill-theobald.de/index-test1.html = timer-based script ( http://nill-theobald.de/index-test2.html = via click (completely different script) )

PLEASE: tell it to a complete javascript-idiot (= me...)

:-)

thank you!

"simply: how do I tell the script "counter = 3" when clicking on button 3" -- I assume you mean script shown here

Assuming you have a button like this (for example):

<input type="button" id="button-3" value="Click me">

JS for handling the click would as simple as:

$("#button-3").click(function() {
    counter = 3;
});

This handler has to be in the same scope as the counter variable to make it work (in case of script linked above it can be right after declaration of var counter = 0;);

EDIT: One more thing. To make sure the switching of the divs occures in expected time, you have to enforce some intervalId management.

HTML:

<a href="#" class="button" rel="1"><img width="11" height="10" alt="video 1" src="orange.gif"></a>
<a href="#" class="button" rel="2"><img width="11" height="10" alt="video 1" src="grau.gif"></a>
<a href="#" class="button" rel="3"><img width="11" height="10" alt="video 1" src="grau.gif"></a>

JS:

$(".button").click(function() {
    counter = parseInt(this.rel);
    showDiv(); // show next div
    setIntervalSwitch(); // reset the interval so the next "switch" is in X seconds
}); 

var intervalId;
var setIntervalSwitch = function() {
    clearInterval(intervalId); // clear old interval
    // now start interval again
    intervalId = setInterval(function () {
         showDiv(); // show next div
    }, 5 * 1000);
}
// call the setIntervalSwitch to initialize interval before someone manually click on any div
setIntervalSwitch();