Pytania dotyczące skryptu slidera

pytanie zadane 1 listopada 2016 w JavaScript przez dewe Gaduła (4,300 p.)

Witam ponownie, ostatnio często tutaj piszę tematy i nadużywam waszej dobroci, ale mam nadzieję, że jeszcze mnie nie macie dosyć :P

Otóż mam taki kod:

(function() {

	var numer = 0;
	var timer;
	var slide = document.getElementsByClassName("slide");
	
	function zmienslajd()
	{
		numer++;
		if (numer>4) numer=1;
		slide[0].src = "images/" + numer + ".png";
		timer = setTimeout(zmienslajd, 1000);
	}
	
	document.getElementsByClassName("left").addEventListener("click", odejmij);
	
	function odejmij()
	{
		numer--;
	}
	
	window.zmienslajd = zmienslajd;
	
})();

<!DOCTYPE html>
<html lang="pl">
<head>
<script src="js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/animate.css"/>
<link rel="stylesheet" href="css/main.css"/>
<script src="js/slider.js"></script>
</head>
<body>
<div class="slider">
	<img class="slide wow fadeIn animated" src="images/1.png"/>
	<div class="left">
	
	</div>
	<div class="right">
	
	</div>
</div>
<script>
$( document ).ready(function() {
    zmienslajd();
});
</script>
</body>
</html>

I mam dwa pytania:

- Co zrobić aby animacja "wow fadeIn animated" aktywowała się z każdą zmianą slidu, a nie tylko przy pierwszym?,

- Gdzie umieścić "document.getElementsByClassName("left").addEventListener("click", odejmij);" aby dodać zdarzenie do klasy? W tym układzie jak jest teraz slider wcale się nie wykonuje.

Pokaż 6 poprzednich komentarzy

komentarz 1 listopada 2016 przez dewe Gaduła (4,300 p.)
edycja 1 listopada 2016 przez dewe

http://scr.hu/0qceu/vzqk9

Niby rozumiem o co chodzi i gdzie szukać błędu, ale nie rozumiem dlaczego biblioteki mi się coś czepia po przeniesieniu

<script src="js/slider.js"></script>

nad

<script>
$( document ).ready(function() {
    zmienslajd();
});
</script>

Aktualny kod:

<!DOCTYPE html>
<html lang="pl">
<head>
<script src="js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="css/animate.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="slider">
	<img class="slide wow fadeIn animated" src="images/1.png"/>
	<div class="left">
	
	</div>
	<div class="right">
	
	</div>
</div>
<script src="js/slider.js"></script>
<script>
$( document ).ready(function() {
    zmienslajd();
});
</script>
</body>
</html>

(function() {

	var numer = 0;
	var timer;
	var slide = document.querySelector(".slide");
	
	function zmienslajd()
	{
		numer++;
		if (numer>4) numer=1;
		slide[0].src = "images/" + numer + ".png";
		timer = setTimeout(zmienslajd, 1000);
	}
	
	document.querySelector(".kili11").addEventListener("click", odejmij);
	
	function odejmij()
	{
		numer--;
	}
	
	window.zmienslajd = zmienslajd;
	
})();

komentarz 1 listopada 2016 przez xmentor Nałogowiec (49,520 p.)
edycja 1 listopada 2016 przez xmentor

document.querySelector(".kili11")

Masz w ogole element na stronie, który ma klase kili11? Bo w twoim HTMLu nie widze.

$( document ).ready(function() {
 [...]
});

To jest zbędne, jeżeli skrypt jest przed </body>

komentarz 1 listopada 2016 przez dewe Gaduła (4,300 p.)

Eh, to "kili11" bylo testowo, ale nawet jak zmienie prawidlowo na "left" to nie dziala.

A co do

$( document ).ready(function() {
 [...]
});

to bez tego skrypt się nie wykonuje wcale

komentarz 1 listopada 2016 przez xmentor Nałogowiec (49,520 p.)

Eh, to "kili11" bylo testowo, ale nawet jak zmienie prawidlowo na "left" to nie dziala.

Ale błąd wyskakuje ten sam?

to bez tego skrypt się nie wykonuje wcale

Tylko, że ten kod, który jest pomiędzy tym $(document)... wykonuje się po załadowaniu DOMu, a skoro skrypt jest przy </body> to wykona się dopiero jak wczyta się cały DOM - więc to jest zbędne.

komentarz 1 listopada 2016 przez dewe Gaduła (4,300 p.)

Błąd jest teraz taki: http://scr.hu/0qceu/8ldp9

W takim razie jak wywołać funkcję zmienslajd()? Bez tego

<script>
$( document ).ready(function() {
    zmienslajd();
});
</script>

Nie wywołuje się wcale.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci