1
I am quite new to JS-scripting and I have a question.
Finally I found a "good" slideshow which works in IE, Chrome, FF with prototype.
The only thing is that I would like the slideshow to stop when the mouse is over the slideshow and start again when the pointer leaves the pics.
Thanks alot in advance!
Already found something, but don't know how to implement it:
------
myTimer = setTimeout(.............)
onmouseover = clearTimeout(myTimer)
onmouseout = fadeInOut();
-------
script:
-------
Expand|Select|Wrap|Line Numbers
- var delay = 4000;
- var start_frame = 0;
- function init() {
- var lis = $('slide-images').getElementsByTagName('li');
- for( i=0; i < lis.length; i++){
- if(i!=0){
- lis[i].style.display = 'none';
- }
- }
- end_frame = lis.length -1;
- start_slideshow(start_frame, end_frame, delay, lis);
- }
- function start_slideshow(start_frame, end_frame, delay, lis) {
- setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
- }
- function fadeInOut(frame, start_frame, end_frame, delay, lis) {
- return (function() {
- lis = $('slide-images').getElementsByTagName('li');
- Effect.Fade(lis[frame]);
- if (frame == end_frame) { frame = start_frame; } else { frame++; }
- lisAppear = lis[frame];
- setTimeout("Effect.Appear(lisAppear);", 0);
- setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
- })
- }
- Event.observe(window, 'load', init, false);
HTML:
-------
Expand|Select|Wrap|Line Numbers
- <head>
- <script type="text/javascript" src="/libraries/prototype/prototype.js"></script>
- <script type="text/javascript" src="/libraries/simple-slide-show.js"></script>
- </head>
- ...
- <div id="slide-show">
- <ul id="slide-images">
- <li><a href="/">
- <img src="/template/images/new2/slider/slider1.png" alt="Target Link 1" />
- </a></li>
- <li><a href="/">
- <img src="/template/images/new2/slider/slider2.png" alt="Target Link 2" />
- </a></li>
- <li><a href="/">
- <img src="/template/images/new2/slider/slider3.png" alt="Target Link 3" />
- </a></li>
- </ul>
- </div>
