• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z rozbudową Slidera

0 głosów
73 wizyt
pytanie zadane 31 stycznia 2018 w JavaScript, jQuery, AJAX 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 Noemi Nałogowiec (41,300 p.)
ciężko się czyta kod, gdy nazwy są po polsku, a jeszcze trudniej jak języki są pomieszane :)

1 odpowiedź

0 głosów
odpowiedź 1 lutego 2018 przez Noemi Nałogowiec (41,300 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.

Podobne pytania

0 głosów
2 odpowiedzi 1,501 wizyt
0 głosów
1 odpowiedź 682 wizyt
pytanie zadane 17 sierpnia 2015 w JavaScript, jQuery, AJAX przez Eimens Maniak (68,800 p.)
0 głosów
0 odpowiedzi 111 wizyt
pytanie zadane 28 grudnia 2017 w Nasze projekty przez marcin.janusz Nowicjusz (120 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

63,367 zapytań

109,637 odpowiedzi

229,050 komentarzy

44,351 pasjonatów

Przeglądających: 256
Pasjonatów: 18 Gości: 238

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...