Zmiana przejścia slidera JS

Question

Hej, 

pobrałem paczkę ze sliderem z kursu JS #2, ponieważ jest to łatwy kod a dopiero się uczę :) 

Co bym chciał zmienić?

Więc tak, chciałbym aby jeden slider chował się i od razu za nim był kolejny, w tym kodzie jest tak że przejście trwa chwilę i jest przerwa pomiędzy slajdami, pokazuje się białe tło na jakąś sekundę, po czym pokazuje się kolejny slajd. 

 

		var numer = Math.floor(Math.random()*5)+1;

		var timer1 = 0;
		var timer2 = 0;

		function ustawslajd(nrslajdu)
		{
			clearTimeout(timer1);
			clearTimeout(timer2);
			numer = nrslajdu - 1;

			schowaj();
			setTimeout("zmienslajd()", 500);

		}

		function schowaj()
		{
			$("#slider").hide(500);
		}

		function zmienslajd()
		{
			numer++; if (numer>5) numer=1;

			var plik = "<img src=\"slajdy/slajd" + numer + ".jpg\" />";

			document.getElementById("slider").innerHTML = plik;
			$("#slider").fadeIn(500);

			timer1 = setTimeout("zmienslajd()", 5000);
			timer2 = setTimeout("schowaj()", 4999);

		}

 

 

Answer 1

Wydaje mi się, że nie jesteś w stanie uzyskać tego efektu modyfikując tylko kod w javascript. Potrzebowałbyś slidera wielowarstwowego .

Ten skrypt wyświetla kolejne slajdy modyfikując zawartość atrybutu src, a w ten sposób nie da się uzyskać płynnego przejścia. Powinieneś utworzyć kolejny element img, który znajdzie się pod tym obecnie wyświetlanym img. Obraz "pod spodem" będzie zawierał kolejny slajd.

Comments

Okey, a opcja żeby slider odjeżdżał z prawej do lewej?

---

Ten efekt można uzyskać za pomocą position: absolute.

W slajdzie, który chcesz ukryć ustawiasz w css

position: absolute;
right: -200px; (strzelam z pikselami, zależy od wielkości obrazka)

Potem, jeżeli chcesz żeby slajd "wjechał" od prawej, w js zmieniasz mu na right:200px; a w slajdzie który "wyjeżdza" ustawiasz left:-200px;
W ten sposób uzyskasz efekt przesuwania się obrazków od prawej do lewej. Ważne jest też, żeby w css dla obrazków ustalić
transition: right 2s;
transition: left 2s;
aby uzyskać płynne przejście.

2s oznacza czas w sekundach

---

Myślałem, że autor chciał uzyskać efekt zmiany slajdu bez animacji chowania się, sorry niedoczytałem.