Witam was serdecznie :P
Jestem początkujący w programowaniu w JS i chciałbym wiedzieć, jak można poprawić slider z 2 odcinku JS u pana Mirosława. Na końcu odcinku powiedział, że slider nie jest idealny. Zauważyłem, że jak klikam bardzo szybko na te numerki, to slider "szaleje", czyli bardzo szybko zmienia slajdy.
Pomyślałem, że można podczas FadeIn i FadeOut uniemożliwić zmianę slajdu. Poklepałem w klawiaturę, pomyślałem, ale dalej nie działa, dlatego proszę was na forum o pomoc. Jestem totalnym newbie w JS, więc proszę o wyrozumiałość :P Poniżej macie kod, który mi nie działa.
<!DOCTYPE html>
<html lang="pl">
<html>
<head>
<meta charset="utf-8" />
<style>
body
{
background-color: #222222;
font-size: 24px;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var numer = Math.floor(Math.random()*5)+1;
var timer1 = 0;
var timer2 = 0;
var sprawdz=true;
function zmiana()
{
sprawdz=true;
}
function ustawslajd(nrslajdu)
{
if(sprawdz==true)
{
clearTimeout(timer1);
clearTimeout(timer2);
numer = nrslajdu - 1;
schowaj();
setTimeout("zmienslajd()", 500);
}
}
function schowaj()
{
sprawdz=false; setTimeout("zmiana()", 500);
$("#slider").fadeOut(500);
}
function zmienslajd()
{
numer++; if (numer>5) numer=1;
var plik = "<img src=\"slajdy/slajd" + numer + ".png\" />";
document.getElementById("slider").innerHTML = plik;
sprawdz=false; setTimeout("zmiana()", 500);
$("#slider").fadeIn(500);
timer1 = setTimeout("zmienslajd()", 5000);
timer2 = setTimeout("schowaj()", 4500);
}
</script>
</head>
<body onload="zmienslajd()">
<span onclick="ustawslajd(1)" style="cursor:pointer;">[ 1 ]</span>
<span onclick="ustawslajd(2)" style="cursor:pointer;">[ 2 ]</span>
<span onclick="ustawslajd(3)" style="cursor:pointer;">[ 3 ]</span>
<span onclick="ustawslajd(4)" style="cursor:pointer;">[ 4 ]</span>
<span onclick="ustawslajd(5)" style="cursor:pointer;">[ 5 ]</span>
<div id="slider"></div>
</body>
</html>