Member Avatar for MDanz

This is a function for a slideshow,onmouseover i want it to stop. Instead of stopping the slideshow onmouseover, it speeds up?? How can i correct this to stop onmouseover?

<body onload="nextslide();">
function nextslide() {

                // Hide current slide
          var object = document.getElementById('slide' + current); //e.g. slide1
          object.style.display = 'none';
             
          // Show next slide, if last, loop back to front
          if (current == last) { current = 1; }
          else { current++ }
          object = document.getElementById('slide' + current);
          object.style.display = 'block';
          var timeout = setTimeout(nextslide, 2500);
		 
			object.onmouseover = function(){ clearTimeout( timeout ) };
object.onmouseout = nextslide;
                                        
       }
  • 2 Contributors
  • 1 Reply
  • 136 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

MDanz,

I see you have marked this solved but here's a more efficient way to structure the code:

//First, frame everything inside an onload handler.
onload = function(){
	//It's much simpler to keep the slides in an array
	var slides = [];
	var n = 10;//number of slides
	var current = -1;
	var timeout;//as an "outer"	variable, timeout is accessible by every instance of nextslide.
	
	//Attach mouseover and mouseout handlers just once for each slide
	for(var i=0; i<n; i++){
		slides[i] = document.getElementById('slide' + i);//find each slide in the DOM just once
		if(slides[i]){//if the DOM element exists
			slides[i].onmouseover = function() { clearTimeout(timeout); };
			slides[i].onmouseout = nextslide;
		}
	}
	
	function nextslide() {
		if(slides[current]){//if the dom element exists
			slides[current].style.display = 'none';//hide current slide
		}
		current = (current+1) % slides.length;//Calculate next index, with wraparound to 0
		if(slides[current]){//if the dom element exists
			slides[current].style.display = 'block';//show next slide
		}
		timeout = setTimeout(nextslide, 2500);
	}
	nextslide();//Start the slideshow.
};
<body><!-- no need for onload="..." here -->

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.