By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,312 Members | 1,248 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,312 IT Pros & Developers. It's quick & easy.

Slideshow stop on mouseover start on mouseout

P: 1
Hi people,

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
  1. var delay = 4000;
  2. var start_frame = 0;
  3.  
  4. function init() {
  5.     var lis = $('slide-images').getElementsByTagName('li');
  6.  
  7.     for( i=0; i < lis.length; i++){
  8.         if(i!=0){
  9.             lis[i].style.display = 'none';
  10.         }
  11.     }
  12.     end_frame = lis.length -1;
  13.  
  14.     start_slideshow(start_frame, end_frame, delay, lis);
  15. }
  16.  
  17. function start_slideshow(start_frame, end_frame, delay, lis) {
  18.     setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
  19. }
  20.  
  21. function fadeInOut(frame, start_frame, end_frame, delay, lis) {
  22.     return (function() {
  23.         lis = $('slide-images').getElementsByTagName('li');
  24.         Effect.Fade(lis[frame]);
  25.         if (frame == end_frame) { frame = start_frame; } else { frame++; }
  26.         lisAppear = lis[frame];
  27.         setTimeout("Effect.Appear(lisAppear);", 0);
  28.         setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
  29.     })
  30. }
  31.  
  32. Event.observe(window, 'load', init, false);
-------
HTML:
-------
Expand|Select|Wrap|Line Numbers
  1. <head>
  2.     <script type="text/javascript" src="/libraries/prototype/prototype.js"></script>
  3.     <script type="text/javascript" src="/libraries/simple-slide-show.js"></script>
  4. </head>
  5.  
  6. ...
  7.  
  8. <div id="slide-show">
  9. <ul id="slide-images">
  10.  
  11. <li><a href="/">
  12. <img src="/template/images/new2/slider/slider1.png" alt="Target Link 1" />
  13. </a></li>
  14.  
  15. <li><a href="/">
  16. <img src="/template/images/new2/slider/slider2.png" alt="Target Link 2" />
  17. </a></li>
  18.  
  19. <li><a href="/">
  20. <img src="/template/images/new2/slider/slider3.png" alt="Target Link 3" />
  21. </a></li>
  22.  
  23. </ul>
  24. </div>
Dec 9 '09 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
Iím not familiar with prototype, though I noticed
Expand|Select|Wrap|Line Numbers
  1.     for( i=0; i < lis.length; i++){
  2.         if(i!=0){
  3.             lis[i].style.display = 'none';
  4.         }
  5.     }
why not starting with 1 instead explicitly checking for 0?
Expand|Select|Wrap|Line Numbers
  1. // the somewhat strange looking first term is used to speed up the loop
  2. // because you calculate the length only once
  3.     for( var l, i=1, l=lis.length; i<l; i++){
  4.         lis[i].style.display = 'none';
  5.      }
Dec 10 '09 #2

Post your reply

Sign in to post your reply or Sign up for a free account.