Javascript-форум - Настройка прокрутки слайдов Jquery

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Настройка прокрутки слайдов Jquery (https://javascript.ru/forum/jquery/49203-nastrojjka-prokrutki-slajjdov-jquery.html)

Настройка прокрутки слайдов Jquery

$(function () {
	var slideSpeed = 700;
	var phase = 2000;
	var elWrap = $('.BRAVEslider'),
		el =  elWrap.find('li'),
		indexImg= 1,
		indexMax= el.length;		
		
	function change () {
		el.fadeOut(slideSpeed);
		el.filter(':nth-child('+indexImg+')').fadeIn(slideSpeed);
	}
		
	function autoChange () {	
		indexImg++;
		if(indexImg> indexMax) {
			indexImg=1;
		}			
		change ();
	}
	
	var interval = setInterval(autoChange, phase);

	elWrap.mouseover(function() {
		clearInterval(interval);
	});
	
	elWrap.mouseout(function() {
		interval = setInterval(autoChange, phase);
	});
	
});

Все нормально работает, прокручивает слайды, вложенные в элемент списка li. Но если оставить страницу со слайдером открытой, а затем через некоторое время вернуться на нее, то слайдер начинает слайды быстро переключать без задержки. Помогите пожалуйста, я еще только учусь.

Автослайдер с остановкой при наведении

Designik,
перепишите код на window.setTimeout вместо setInterval
или такой вариант ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .BRAVEslider li:nth-child(n+2){
   display: none;
 }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
     var slideSpeed = 700;
     var phase = 2E3;
     var elWrap = $(".BRAVEslider"),
         el = elWrap.find("li"),
         indexImg = 0,
         indexMax = el.length;

     function change() {
         el.eq(indexImg).delay(phase).fadeOut(slideSpeed, function () {
             indexImg = ++indexImg % indexMax;
             el.eq(indexImg).fadeIn(slideSpeed, change)
         })
     }
     elWrap.mouseenter(function () {
         el.eq(indexImg).stop(true)
     });
     elWrap.mouseleave(function () {
         change()
     });
     change()
 });
</script>
</head>

<body>
    <ul class="BRAVEslider">
      <li>1</li><li>2</li><li>3</li><li>4</li>
    </ul>
</body>

</html>