Форум

BeetleJuice541 · #1 (**permalink**) 18.07.2014, 17:12

Я делаю галерею на сайте.
Есть 7 картинок.
При клике нужно чтобы она увеличилась.
Вот что у меня получилось.
JS
function gal(){
var vp = document.getElementById('vp');
var nz = document.getElementById('nz');
var fon = document.getElementById('fon');
var zakr = document.getElementById('zakr');
var conteiner_2 = document.getElementById('conteiner_2');
x.style.display = "block";
vp.style.display = "block";
nz.style.display = "block";
fon.style.display = "block";
zakr.style.display = "block";
conteiner_2.style.display = "block";
}
HTML
<div onclick="x = document.getElementById('x1'); gal(); "><img src="img\g1.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x2'); gal(); "><img src="img\g2.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x3'); gal();"><img src="img\g3.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x4'); gal();"><img src="img\g4.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x5'); gal();"><img src="img\g5.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x6'); gal();"><img src="img\g6.jpg" width="161px" height="108px" align="left" / ></div>
<div onclick="x = document.getElementById('x7'); gal();"><img src="img\g7.jpg" width="115px" height="108px" align="left" / ></div>
Я понимаю что код глупый,но он работает

Мне нужно сделать так чтобы картинки можно было листать,как это лучше всего сделать?Без jquery,и уже готовый скриптов?
Я думал что нужно отталкиваться от id картинок(x1 x2 x3),Можно как то сделать что при клике на стрелочку,id картинки изменится на следующий.(нажал на стрелочку,x1 изменилось на x2 и открылась картинка с x2)
Первый раз обращаюсь,простите если тчо не так)

skrudjmakdak · #2 (**permalink**) 18.07.2014, 17:47

<html>
	<head>
		<title>example</title>
		<style>
		.bl
		{
		width: 50px;
		height: 50px;
		margin: 5px;
		float: left;
		border: 1px solid black;
		}
		
		.big_container
		{
		width: 300px;
		height: 300px;
		border: 1px solid black;
		}
		</style>
	</head>
	<body>
		<div class="big_container"></div>
		<div>
			<div class="bl" color="red" style="background-color: red;"></div>
			<div class="bl" color="yellow" style="background-color: yellow;"></div>
			<div class="bl" color="blue" style="background-color: blue;"></div>
			<div class="bl" color="silver" style="background-color: silver;"></div>
			<div class="bl" color="orange" style="background-color: orange;"></div>
			<div class="bl" color="green" style="background-color: green;"></div>
			<div class="bl" color="aqua" style="background-color: aqua;"></div>
		</div>
		<input type="button" value="вперед" class="next">
		<script>
var big_container = document.querySelector('.big_container'),
	select;

document.querySelector('input[type=button]').onclick = function ()
	{
	if (!select || !select.nextElementSibling)
		return;
		
	select = select.nextElementSibling;
	big_container.style.backgroundColor = select.getAttribute('color');
	}
		
Array.prototype.forEach.call(document.querySelectorAll('.bl'), function (ths)
	{
	ths.onclick = function ()
		{
		select = this;
		big_container.style.backgroundColor = this.getAttribute('color');
		}
	});
		</script>
	</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript