Automatyczna zmiana obrazkow

Witam , jestem poczatkujacy w js , chcialem zrobić taka opcje:
http://www.alohatechsupport.net/examples/image-rotator/image-rotator.html
Automatyczna zmiana obrazkow - logo strony.

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html

Co pare sekund nastepuje zmiana zdjecia, Problem jest taki , ze po kliknieciu na jakis link na stronce (ewentualnie F5) - funkcja javascript startuje na nowo i wyswietla obrazek pierwszy.
Dodaldalem mozliwość z jquery-cookies i zapisuje ostatnio otwarte zdjecie , po starcie czytam na samym poczatku , ktore zdjecie bylo wyswietlone i zaczynam wyświetlanie od niego.

Leczy przy szybkim klikaniu po linkach , zdjecie praktycznie się nie zmieni bo funkcja startuje od poczatku i czas jest zerowany.
Jak zrobić zapisywanie czasu zamkniecia aktualnej strony i przejscia do nowego linka i jak go wykorzystać w funkcji theRotator() , żeby zdjecia wyżwietlały sie równo co 7sec.

HTML

<div class="rotator">
  <ul>
    <li class="show">
    <a href="javascript:void(0)">
    <img src="images/image-1.jpg" width="500" height="313"  alt="pic1" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-2.jpg" width="500" height="313"  alt="pic2" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-3.jpg" width="500" height="313"  alt="pic3" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-4.jpg" width="500" height="313"  alt="pic4" />
    </a>
    </li>
  </ul>
</div>

JQUERY

function theRotator() {
	//Set the opacity of all images to 0
	$('div.rotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div.rotator ul li:first').css({opacity: 1.0});
		
	
	
	setInterval('rotate()',7000);
	
}

function rotate() {	
	//Get the first image
	var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
	
	//Un-comment the 3 lines below to get the images in random order
	
	//var sibs = current.siblings();
        //var rndNum = Math.floor(Math.random() * sibs.length );
        //var next = $( sibs[ rndNum ] );
			

	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};



$(document).ready(function() {		
	//Load the slideshow
	theRotator();
	$('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});

CSS:

/* rotator in-page placement */
        div.rotator {
	position:relative;
	height:345px;
	margin-left: 15px;
}
/* rotator css */
	div.rotator ul li {
	float:left;
	position:absolute;
	list-style: none;
}
/* rotator image style */	
	div.rotator ul li img {
	border:1px solid #ccc;
	padding: 4px;
	background: #FFF;
}
        div.rotator ul li.show {
	z-index:500;
}

pamietaj ze przegladarki moga "stopowac" javascript po kliknieciu w link - i w oczekiwaniu na polaczenie z serwerem itd js i tak nie bedzie wykonywany - tak samo przy ładowaniu nowej strony - zanim DOM nie będzie gotowy - js też stoi. dlatego idealnie tego tak nie zrobisz i tak. lepszym wyjściem byłaby nawigacja w ajaxie.
a jak chcesz po swojemu to... jako, że "pobrania" czasu z timerów w javascripcie jest niemożliwe (albo ja o czymś nie wiem) - zostaje tylko zrobinie drugiego timera, który co np 100ms odejmuje od jakiejś zmiennej 100 i zapisuje to w ciastach, a Twój timer co 7 sek żeby przy każdym wywołaniu "zerował" tą zmienną do 7000.

Przeładowanie strony może zająć tak losową ilość czasu, że ja bym zupełnie olał tutaj dokładne zapisywanie czasu w Cookiesach. Po zmianie obrazka zapisywałbym jedynie, na którym obrazku jesteśmy, żeby po kliknięciu w jakiś link widoczny był ten sam obrazek i by rotator leciał dalej. Nie widzę sensu w zapisywaniu czasu.

W ogólności jednak można to zsynchronizować, jakby ktoś się uparł (tylko po co?). Po zmianie obrazka należy zapisać w Cookiesach bieżący czas i numer bieżącego obrazka. Po przeładowaniu strony możemy to odczytać i po pierwsze ustawić odpowiedni obrazek, a po drugie zaplanować czas następnej zmiany na podstawie różnicy daty bieżącej i daty zapisanej w ciasteczku. Wystarczy, że zamiast setInterval() użyjemy setTimeout() i za pierwszym razem jako parametr podamy wspomnianą różnicę, a dopiero potem albo będziemy wciąż używali setTimeout() i podawali normalny interwał czasowy, albo po prostu przejdziemy na setInterval() z tymże interwałem.

PS. Krążą po necie pogłoski, że bswierczynski ukatrupi każdego, kto napisze/przeklei głupotę w stylu:

setInterval('rotate()',7000);

podczas gdy krócej i pod każdym względem lepiej można napisać:

setInterval(rotate,7000);

Więc mniej się na baczności ;) ;)