Галерея с увеличением картинки и изменение.
Я делаю галерею на сайте.
Есть 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) Первый раз обращаюсь,простите если тчо не так) |
<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>
|
| Часовой пояс GMT +3, время: 00:50. |