No to lecim:
<div id="slider"></div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
Utworzyłeś diva. OK. Ale po co aż 5 niezaniegdżonych węzłów. Wystarczy jeden element HTML w którym podmieniasz treść, najwyżej tworzysz element HTML. Tym bardziej dla tak podstawowego slidera. Po trzecie wywołujesz click na SPAN?
- timery mogłybyć zapisane, w samej funkcji
- Zauważ, że wywołujesz raz slider i przepisujesz go do zmiennej. OK. Wywołujesz znowu i znowu przepisujesz id slider do jakieś komórki. Po jakimś czasie, takie coś potrafi trochę RAM-u zjeść :). Nuluj , jeżeli już nie potrzebujesz.
- Ocena odrobiny przekombinowales Slidera. Można prościej, bez takiej ilości setTime.
Po pierwsze rozdziel warstwy: od Animacji i od Kontrolera Slidera. Animacje można stworzyć za pomocą keyframes i reguł CSS opacity i to właściwie tyle. I stworzyć klasę CSS, która uruchomi tą animacje, czyli animation plus nazwa keyframes plus dodatkowe właściwości animation-fill-mode, animation-delay-time. Jak to zrobić? Do tego musisz sam dojść. Następnie gdy zajdzie owa sytuacja. JS przepisze klasę CSS do danego elementu HTML i tyle i tylko tyle zrobi do obsługi Animacji, jego zadaniem będzie kontrola animacji, b ędzie Podmieniał odpowiednim czasie obraz i tu wystarczy jedna funkcja i jedna rekurencja i to tyle. I nie trzeba do tego jQuery (na tym poziomie nie ma problemów z IE tak mi się wydaje).
O addEventListener , pomyśl o tym jako o obserwatorze, który na coś patrzy na jakiś element. Od zależności wywołanego zdarzenia click uruchomi funkcje X, gdy ktoś najedzie uruchomi funckje J. Po przez addEventListenera , możesz do jednego elementu HTML, przepisać różne funckje, zależności od zdarzenia. I tu jest ważne, uchwyt(obiekt) nieuzyskuje prawo do własnośći do tej metody. Czyli mogę X uchwytów stworzyć, które będą korzystały z tej samej funkcji. O co chodzi mam taką funkcję:
<script>
document.getElementByID("jakisPrzycisk").onclick = function ()
{
var p = document.getElementById("pierwszyButton");
var c= document.getElementById("drugiButton");
p.onclick = Alert;
c.onclick = Alert; //tu bedzie blad.
}
function Alert()
{
alert ("ELO");
}
</script>
Tylko jedna funckja, może być przepisana do danego obiektu, staję się jego własnością. AddEventListener daje większe możliwośći. Masz link do tego zagadnienia: https://developer.mozilla.org/pl/docs/Web/API/Element/onclick.