Jak stworzyć projekt przedstawiony na tym obrazku?

pytanie zadane 1 kwietnia 2019 w Nasze projekty przez Kubs Mądrala (5,190 p.)

Witajcie,

jak zrobić coś takiego używając Java Script, HTML, CSS? Nie mam pojęcia jak się do tego zabrać

1 odpowiedź

odpowiedź 1 kwietnia 2019 przez Chess Szeryf (76,710 p.)
edycja 2 kwietnia 2019 przez Chess

#one1, #one2, #one3 {
	background: orange;
	width: 100px;
	height: 100px;
	display: none;
}

#one2 {
	background: silver;
}

#one3 {
	background: brown;
}

#one3 {
	display: block;
}

<body style="background: olive;">

<div id="one1">1</div>
<div id="one2">2</div>
<div id="one3">3</div>

<button id="left">left</button>
<button id="right">right</button>

const left = document.getElementById('left');
const right = document.getElementById('right');

var slide_which = document.querySelector('#one1, #one2, #one3').length;

[left, right].forEach(function(a) {
	a.addEventListener('click', function() {

		if(slide_which > 1 && this.id == 'left') {
			
			let aqq = slide_which - 1;
			document.getElementById('one' + aqq).style.display = 'block';
			document.getElementById('one' + slide_which).style.display = 'none';
			
			slide_which--;
			
		}
		
		if(slide_which < 3 && this.id == 'right') {
		
			let aqq = slide_which + 1;
			document.getElementById('one' + aqq).style.display = 'block';
			document.getElementById('one' + slide_which).style.display = 'none';
			
			slide_which++;
		}
	}, false);
});

</body>

Zamiast display możesz zastosować position: relative i position: absolute lub jakieś visibility czy coś dla innego efektu wizualnego.

komentarz 1 kwietnia 2019 przez Kubs Mądrala (5,190 p.)

Dziękuję, popatrze sobie na twoje rozwiazanie i przeanalizuje.

Ale jak uzyskac taki konkretny ksztal jaki tworzy ta pomaranczowa linia? I jak w tym kształcie umieścić te zdjecia?

komentarz 2 kwietnia 2019 przez Chess Szeryf (76,710 p.)

Napisz div#container wrzuć tam kilka grafik. Dalej Po kliknięciu niech będzie np. jakaś animacja jak lecą do jakiegoś innego pojemnika jak na obrazku u Ciebie. Jak już się usadowią na nowym miejscu będziesz mógł włączyć przełączanie grafik, czyli warunek dodaj jakiś i tyle.