Problem z rozbudową Slidera

pytanie zadane 31 stycznia 2018 w JavaScript przez Kraken14 Nowicjusz (120 p.)

Skonstruowałem prosty slider z HTML,CSS i czystym JS (bez JQuery). Zmieniający obrazki co 3 sekundy automatycznie. Wszystko wrzuciłem do 1 funcji AutomaticChanger() i działa. Potem dodałem strzałki, żeby użytkownik mógł przewijać obrazki po swojemu, okodowałem wszystko i podpiąłem pod divy ze strzałkami (metodą "onclick"). I tu mam problem, po kliknięciu strzałki w prawo jest przeskok o 2 obrazki, a nie o zamierzony 1, a strzałka w lewo w sumie nic nie robi. Kilka razy wszystko sprawdzałem i nw co jest nie tak...

CSS:

	body{
		margin:0;
		background-color:black;
		}
		
		div{
		border:2px solid gold;
		width:250px;
		height:250px;
		overflow:hidden;
		margin-top:150px;
		position:relative;
		color:white;
		}
		
		img{
		opacity:0;
		width:250px;
		height:250px;
		position:absolute;
		top:0;
		left:0;
		transition:1.5s linear;
		}
		
		.active{
		opacity: 1;
		}

		#AL{
		font-size:50px;
		width:50px;
		border:none;
		float:left;
		cursor:pointer;
		}

		#AR{
		font-size:50px;
		width:50px;
		border:none;
		float:right;
		cursor:pointer;
		}

HTML:

<html>
<head>
</head>
<body>
	<center>
		<div id="AL" onclick='arrow("L")'>&laquo;</div>
		<div id="AR" onclick='arrow("P")'>&raquo;</div>
	<div>
		<img src="http://dziennikarstwo.wroclaw.pl/wp-content/uploads/2017/11/maxresdefault-1-1.jpg"/>
		<img src="http://i0.kym-cdn.com/entries/icons/original/000/021/425/67497298.jpg"/>
		<img src="https://www.dayzrp.com/uploads/monthly_2016_11/large.5837122d1f6db_DeusVultBitch.png.43771f42e7cdd913c0c7dbeccb5c5bfd.png"/>
		<img src="https://i.imgflip.com/1gm4tn.jpg"/>
		<img src="http://i0.kym-cdn.com/photos/images/facebook/001/176/885/d8a.png"/>
	</div>
	</center>
</body>
</html>

JS:

	var index;
	var timer;
	document.querySelector("img").className = "active";
	AutomaticChanger();
	function AutomaticChanger(){
		var zdjecia = document.querySelectorAll("img");
		for(i = 0 ; i < zdjecia.length ; i++){
			if(zdjecia[i].src == document.querySelector(".active").src){
				index = i;
			}
		}
		if((index+1) < zdjecia.length){
			zdjecia[index].className = "";
			zdjecia[(index+1)].className = "active";
		}else{
			zdjecia[index].className = "";
			zdjecia[0].className = "active";
		}
		timer = setTimeout("AutomaticChanger()",3000);
	}

function arrow(Kierunek){
clearTimeout(timer);
if(Kierunek == "L"){
	var zdjecia = document.querySelectorAll("img");
	for(i = 0 ; i < zdjecia.length ; i++){
	if(zdjecia[i].src == document.querySelector(".active").src){
		index = i;
		break;
	}
	}
	if((index-1) >= 0){
		zdjecia[index].className = "";
		zdjecia[(index-1)].className = "active";
	}else{
		zdjecia[index].className = "";
		zdjecia[(zdjecia.length-1)].className = "active";
	}
	AutomaticChanger();
}else{
	var zdjecia = document.querySelectorAll("img");
	for(i = 0 ; i < zdjecia.length ; i++){
	if(zdjecia[i].src == document.querySelector(".active").src){
		index = i;
		break;
	}
	}
	if((index+1) <= (zdjecia.length-1)){
		zdjecia[index].className = "";
		zdjecia[(index+1)].className = "active";
	}else{
		zdjecia[index].className = "";
		zdjecia[0].className = "active";
	}
	AutomaticChanger();
}
}

komentarz 1 lutego 2018 przez imklau Nałogowiec (42,090 p.)

ciężko się czyta kod, gdy nazwy są po polsku, a jeszcze trudniej jak języki są pomieszane :)

1 odpowiedź

odpowiedź 1 lutego 2018 przez imklau Nałogowiec (42,090 p.)

Nie wiem dlaczego masz tak zrobione (nie potrafię ogarnąć Twojego kodu) ale ogólnie Twoja funkcja AutomaticChanger() zwiększa index i zmienia aktywne zdjęcie na to kolejne...jak usuniesz cały kod w przypadku kliknięcia w prawą strzałkę i dasz tam po prostu wywołanie tej funkcji to wtedy działa :)

To nie powinno być tak, że w AutomaticChanger zwiększa się index, bo przecież wywołujesz też tę funkcję przy kliknięciu lewej strzałki.