Witam, napisałem swój jeden z pierwszych skryptów i mam problem, ponieważ po kliknięciu w czerwone kwadraciki (przejście do następnego slajdu) nie robi się efekt (fadeIn), a po kilku sekundach nie zanika (fadeOut), aktualnie usunąłem te linjiki kodu, ponieważ i tak nie działały, ale mógłby mnie ktoś uświadomić co zrobić, aby to działało lub podać gotowe rozwiązanie? :) (Zapewne rozwiązanie to 2/3 linijki kodu, dlatego proszę o gotowca)
<!DOCTYPE html>
<html lang="pl">
<head>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
#slider { width: 971px; height: 207px; border: 1px solid black; margin: auto; position: relative; }
.left { width: 50px; height: 50px; background: red; z-index: 1; position: absolute; top: 80px; left: 50px; }
.right { width: 50px; height: 50px; background: red; z-index: 1; position: absolute; top: 80px; right: 50px; }
</style>
</head>
<body onload="zmienslajd()">
<div id="slider">
</div>
<script type="text/javascript">
var numer = 1;
var timer;
var timer2;
function dodaj()
{
clearTimeout(timer);
clearTimeout(timer2);
if (numer>4) numer = 1;
numer++;
var plik = "<img src=\"images/" + numer + ".png\" />" + "<span class=\"left\" onclick=\"odejmij()\"></span>" + "<span class=\"right\" onclick=\"dodaj()\"></span>";
document.getElementById("slider").innerHTML = plik;
numer--;
setTimeout("schowaj()", 4500);
zmienslajd();
}
function odejmij()
{
$("#slider").fadeIn(500);
setTimeout("schowaj()", 4500);
clearTimeout(timer);
clearTimeout(timer2);
numer--;
var plik = "<img src=\"images/" + numer + ".png\" />" + "<span class=\"left\" onclick=\"odejmij()\"></span>" + "<span class=\"right\" onclick=\"dodaj()\"></span>";
document.getElementById("slider").innerHTML = plik;
numer--;
if (numer>4) numer = 1;
if (numer<1) numer = 4;
zmienslajd();
}
function schowaj()
{
$("#slider").fadeOut(500);
}
function zmienslajd()
{
if (numer>4) numer = 1;
var plik = "<img src=\"images/" + numer + ".png\" />" + "<span class=\"left\" onclick=\"odejmij()\"></span>" + "<span class=\"right\" onclick=\"dodaj()\"></span>";
document.getElementById("slider").innerHTML = plik;
numer++;
$("#slider").fadeIn(500);
timer = setTimeout("zmienslajd()", 5000);
timer2 = setTimeout("schowaj()", 4500);
}
</script>
</body>
</html>
