Cześć!
W drugim odcinku kursu JavaScript na Pasja Informatyki tworzymy slider. W trakcie zmiany slajdu najpierw zanika widoczny slajd, widać przez chwilę tło strony i dopiero pokazuje się kolejny slajd. Chciałbym wyeliminować ten "przestój" w postaci widoku tła strony, czyli zrobić tak, aby ten następny slajd zaczął się pokazywać już w trakcie zaniku poprzedniego. Jest to pewnie banalne, ale zaciąłem się na tym. Próbowałem już wszystkiego i nic. Zero pomysłu. Prosiłbym o pomoc jak to wykonać.
Z góry dzięki!
Kod slidera
<!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;
function ustawslajd(nrslajdu)
{
clearTimeout(timer1);
clearTimeout(timer2);
numer = nrslajdu - 1;
schowaj();
setTimeout("zmienslajd()", 500);
}
function schowaj()
{
$("#slider").fadeOut(500);
}
function zmienslajd()
{
numer++; if (numer>5) numer=1;
var plik = "<img src=\"slajdy/slajd" + numer + ".png\" />";
document.getElementById("slider").innerHTML = plik;
$("#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>