Dodany obiekt nr 2 pojawił się pod obiektem nr 1, a ma być w tej samej linii.

pytanie zadane 18 czerwca 2016 w JavaScript przez Krzysiek_34 Mądrala (6,090 p.)
zamknięte 20 czerwca 2016 przez Krzysiek_34

Witam.
Zrobiłem tak, że 5 obrazków przesuwa się w lewo w jednej linii. Chciałbym, aby te obrazki przesuwały się 2x w tej samej linii.
Ma to wyglądać w ten sposób: 01, 02, 03, 04, 05, 06, 01, 02, 03, 04, 05, 06 w tej samej linii.

U mnie wygląda to tak:
linia nr 1 ---> 01, 02, 03, 04, 05, 06 (obrazki pojawiają się od razu)
linia nr 2 ---> 01, 02, 03, 04, 05, 06 (obrazki pojawiają się po 3 sekundach)

Obrazki w linii nr 2 znajdują się tuż pod linią nr 1.

Co muszę poprawić w kodzie, aby linia nr 2 pojawiła się tuż obok linii nr 1, a nie pod nią? Czy pomoże tutaj display: inline;?

<div class="photobanner">
	<div id="photoSlider">
		<div class="photos">
			<img src="images/01.jpg" style="margin-top: 15px" />
			<img src="images/02.jpg" style="margin-top: 15px" />
			<img src="images/03.jpg" style="margin-top: 15px" />
			<img src="images/04.jpg" style="margin-top: 15px" />
			<img src="images/05.jpg" style="margin-top: 15px" />
			<img src="images/06.jpg" style="margin-top: 15px" />
		</div>
	</div>
</div>

<script type="text/javascript">
	setTimeout(function() {
		var time = new Date().getTime();
		var $target = $('.photobanner').find('div#photoSlider:first');
		$target.clone().appendTo('.photobanner');
	}, 3000);
</script>

.photobanner
{
	overflow: hidden;
	background: white;
	position: absolute;
	left: 225px;
	top: 350px;
	width: 900px;
}

#photoSlider
{
	width: 1400px;
	height: 130px;
}

#photoSlider img
{
	width: 200px;
	height: 100px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.photos
{
	-webkit-animation: bannermove 70s linear infinite;
	-moz-animation: bannermove 70s linear infinite;
	-ms-animation: bannermove 70s linear infinite;
	-o-animation: bannermove 70s linear infinite;
	animation: bannermove 70s linear infinite;
}

komentarz zamknięcia: Problem został w końcu rozwiązany i temat uważam za zamknięty.

1	komentarz 18 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.) Dobrze, że przerzuciłeś się w końcu z marquee na czysty JS + CSS. Szacun, że po 2 miesiącach (jeśli dobrze patrzę na daty Twoich poprzednich tematów dotyczących tego problemu) nadal jeszcze nie zrezygnowałeś :)

komentarz 18 czerwca 2016 przez Krzysiek_34 Mądrala (6,090 p.)

Przerzuciłem się z marquee na JS + CSS, bo to daje lepszy efekt.

Wzorowałem się na takich stronach jak:
https://designshack.net/tutorialexamples/photobanner/index.html
http://www.dbnz.co.nz/2016-preview/

Na tych obu stronach obrazki przesuwają się bez przerwy w nieskończoność, a u mnie nie.

Przy takim zapisie:

<div class="photobanner">
	<div id="photoSlider">
		<div class="photos">
			<img src="images/01.jpg" style="margin-top: 15px" />
			<img src="images/02.jpg" style="margin-top: 15px" />
			<img src="images/03.jpg" style="margin-top: 15px" />
			<img src="images/04.jpg" style="margin-top: 15px" />
			<img src="images/05.jpg" style="margin-top: 15px" />
			<img src="images/06.jpg" style="margin-top: 15px" />
		</div>
	</div>
</div>

<script type="text/javascript">

</script>

czyli usunięciu to co było w JS, to wtedy tych 6 obrazków gdy przesunie się w lewo, to mija dokładnie 30 sekund i po tym czasie te obrazki ponownie przesuwają się w lewo i tak bez przerwy.

Etapy wyglądają w ten sposób:

1. Obrazki przesuwają się w lewo i gdy znikną, to

2. przez 30 sekund nie ma tych obrazków

3. Po tych 30 sekundach znowu przesuwają się w lewo

Czyli 1-3, 1-3, 1-3 i tak bez przerwy. Denerwuje mnie tylko etap nr 2.

Co jest przyczyną, że trzeba czekać 30 sekund, aby ponownie te obrazki przesuwały się?

Czy byłoby dobrym pomysłem, abym w sekcji <head> wkleił linki od JS prawdopodobnie odpowiadające za nieskończoność? Tylko pytanie, czego nieskończoność?

O to te linki:

https://github.com/fredwu/jquery-endless-scroll

Tam w folderze "js" znajduje się plik jquery.endless-scroll.js oraz jquery.min.js

Albo to:

http://www.jsdelivr.com/projects/jquery.infinitescroll

Tam są linki, np:

https://cdn.jsdelivr.net/jquery.infinitescroll/2.1.0/jquery.infinitescroll.min.js

https://cdn.jsdelivr.net/jquery.infinitescroll/2.1.0/jquery.infinitescroll.js

komentarz 18 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Nie 30 sekund, tylko 3. 3000ms to są 3 sekundy. Poza tym setTimeout() wykona się raz, w przeciwieństwie do setInterval(), który co określoną wartość czasu będzie wykonywał się cyklicznie.

Mnie się tam nic nie przesuwa w lewo, a po prostu kolejne rzędy rysunków się dostawiają pod sobą: http://codepen.io/ChrissP92/pen/jrMyVg?editors=1010

komentarz 18 czerwca 2016 przez Krzysiek_34 Mądrala (6,090 p.)

Te 30 sekund przerwy nie ma nic wspólnego z kodem:

<script type="text/javascript">
	setTimeout(function() {
		var time = new Date().getTime();
		var $target = $('.photobanner').find('div#photoSlider:first');
		$target.clone().appendTo('.photobanner');
	}, 3000);
</script>

Przy pomocy tego zapisu w JS, to w linii nr 2 ---> obrazki pojawiają się po 3 sekundach. W linii nr 1 odbywają się te etapy:

1. Obrazki przesuwają się w lewo i gdy znikną, to
2. przez 30 sekund nie ma tych obrazków
3. Po tych 30 sekundach znowu przesuwają się w lewo

Kumasz?

komentarz 18 czerwca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Jakoś nie bardzo rozumiem ten skrypt. Tzn. co innego widzę na codepen.io, a co innego Ty opisujesz.

Wiem natomiast, że tworzysz zmienną var time = new Date().getTime();, a potem z niej nie korzystasz.

komentarz 18 czerwca 2016 przez Krzysiek_34 Mądrala (6,090 p.)

Mistrzu.

Zależy mi tylko na jednym, aby tych 6 obrazków przesuwało się bez przerwy w nieskończoność, czyli: 01, 02, 03, 04, 05, 06, 01, 02, 03, 04, 05 06 i tak bez przerwy.

Ten kod w JS:

<script type="text/javascript">
    setTimeout(function() {
        var time = new Date().getTime();
        var $target = $('.photobanner').find('div#photoSlider:first');
        $target.clone().appendTo('.photobanner');
    }, 3000);
</script>

to zrobiłem w formie testu tylko po to, bo liczyłem na to, że po 3 sekundach uruchomi się ponowne przesuwanie tych wszystkich obrazków, ale po 3 sekundach znalazły się pod tymi głównymi przesuwanymi obrazkami.

Potrafiłbyś ogarnąć te przesuwanie się obrazków bez przerwy w nieskończoność?

komentarz 20 czerwca 2016 przez Krzysiek_34 Mądrala (6,090 p.)

Zrobiłem już tak, że jest OK.

.photos
{
	-webkit-animation: bannermove 120s linear infinite;
	-moz-animation: bannermove 120s linear infinite;
	-ms-animation: bannermove 120s linear infinite;
	-o-animation: bannermove 120s linear infinite;
	animation: bannermove 120s linear infinite;
}

Okazało się, że zapis 120s to czas trwania przesuwanych obrazków, czyli od startu do końca obrazki przesuwają się przez 120 sekund, czyli 2 minuty. Po upływie tych 120 sekund proces przesuwania powtarza się i tak jest bez przerwy. Ważne, że jest OK.