Доброго времени суток, проблема со скриптом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css">
.img1{
background-color:#7E6497;
}
.img2{
background-color:#D0FF00;
}
.img3{
background-color:#00C8FF;
}
.img4{
background-color:#001318;
}
#img{
width:200px;
height:200px;
margin:auto;
margin-top: 8%;
}
</style>
</head>
<body>
<div id='an'><header id="img" role="banner" style="background-position: 50% 18px;"></header></div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(function(){
var imgMass = ['img1','img2','img3','img4'];
var i = 0;
var r = 0;
var go = true;
add(); // auto
setTimeout(remove, 5000) // auto
setTimeout(animat, 4000); // auto
$('header[id=img]').hover(function(){
if(go){
return stopTimer();
}
},function(){
if(!go){
return startTimer();
}
});
function add(){
if(!go){
return;
}else if(i == 4){
i = 0
}
$('header[id=img]').addClass(imgMass[i]);
i++;
setTimeout(add,5000);
};
function remove(){
if(!go){
return;
}else if(r == 4){
r = 0
}
$('header[id=img]').removeClass(imgMass[r]);
r++;
setTimeout(remove, 5000);
};
function animat(){
if(!go){
return;
}
$('header[id=img]').animate({'opacity':'0'},1000).animate({'opacity':'1'},1000);
setTimeout(animat,5000)
};
function stopTimer(){
go = false;
}
function startTimer(){
go = true;
setTimeout(add, 5000);
setTimeout(remove, 5000);
setTimeout(animat, 4000);
}
})
</script>
</body>
</html>
Его идея помимо плавной смены изображений заключается в том, что при наведении на область картинок слайд-шоу останавливалась, а при уводе мышки продолжалась с того же места. И все бы ничего, но по факту слайд-шоу, до наведения работает так как и задумано, при наведении делает паузу как и задумано, но при уводе ускоряется раза в два, позже просто все таймеры сбиваются. Мне кажется, что проблема в setTimeout такое чувство, что после увода работают и таймер который был, до события hover() и после одновременно Вы как считаете в чем проблема? Каким образом исправить этот скрипт? И есть ли альтернатива? Заранее спасибо =)