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.

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

window.zmienslajd = zmienslajd;

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

Dziwnie żeś to zrobił.

Zamiast document.getElementsByClassName

użyj document.querySelector.

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

(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(".left").addEventListener("click", odejmij);
	
	function odejmij()
	{
		numer--;
	}
	
	window.zmienslajd = zmienslajd;
	
})();

Nadal nie działa slider.

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

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

przenieś nad

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

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

<!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>

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

Nie rozumiem kompletnie tych błędów z konsoli, nadal nie działa niestety.

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

Wrzuć tutaj ich treść

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