Напишите функцию, которая создает галерею картинок в определенном контейнере.
Напилите функцию, которая создает галерею картинок в определенном контейнере. В качестве параметра передавайте id контейнера и массив со строками ссылок на картинки:
gallery("galleryContainer",["https://static33.cmtt.ru/paper-media/fd/92/e5/0479e08f8e852d.png", "http://s00.yaplakal.com/pics/pics_original/1/9/4/3736491.jpg"]
вот мой код:
var image = ["https://static33.cmtt.ru/paper-media/fd/92/e5/0479e08f8e852d.png", "http://s00.yaplakal.com/pics/pics_original/1/9/4/3736491.jpg"];
function gallery(idparameter, array){
var current = 1;
var kolvo = 2;
var div = document.createElement('div');
div.setAttribute('id', idparameter);
var input1 = document.createElement('input');
input1.setAttribute('type', 'button');
input1.setAttribute('value', 'Вперёд');
input1.setAttribute('onClick', 'frw()');
div.appendChild(input1);
var input2 = document.createElement('input');
input2.setAttribute('type', 'button');
input2.setAttribute('value', 'Назад');
input2.setAttribute('onClick', 'bck()');
div.appendChild(input2);
for(var i=0;i<array.length;i++){
var img = document.createElement('img');
img.setAttribute('src', array[i]);
img.setAttribute('name', 'r');
div.appendChild(img);
}
function frw(){
if(current < kolvo){
current++;
document.images['r'].src=array[current-1].src;
}
}
function bck(){
if(current > 1){
current--;
document.images['r'].src=array[current-1].src;
}
}
return div;
}
document.body.appendChild(gallery("galleryCounter", image));
Как сделать, что бы при нажатии на кнопку появлялась следующая картинка, а не как у меня две вывелись и кнопки не работают почему-то.. |
Marson,
изменили current, затем проверили и если вышли за границы массива изменили ещё раз |
простейший слайдер
Marson,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#galleryCounter{
width: 300px;
height: 190px;
margin: 20px auto;
}
#galleryCounter img{
width: 300px;
height: 170px;
}
</style>
</head>
<body>
<script>
var image = ["http://s00.yaplakal.com/pics/pics_preview/5/3/6/12440635.jpg", "http://s00.yaplakal.com/pics/pics_original/1/9/4/3736491.jpg"];
function gallery(idparameter, array) {
var current = 1;
var kolvo = array.length;
var div = document.createElement("div");
div.id = idparameter;
var img = document.createElement("img");
img.src = array[current];
div.appendChild(img);
var input1 = document.createElement("input");
input1.setAttribute("type", "button");
input1.setAttribute("value", "\u0412\u043f\u0435\u0440\u0451\u0434");
input1.onclick = frw;
div.appendChild(input1);
var input2 = document.createElement("input");
input2.setAttribute("type", "button");
input2.setAttribute("value",
"\u041d\u0430\u0437\u0430\u0434");
input2.onclick = bck;
div.appendChild(input2);
function frw() {
current++;
if (current == kolvo) current = 0;
img.src = array[current]
}
function bck() {
current--;
if (current < 0) current = kolvo - 1;
img.src = array[current]
}
return div
}
document.body.appendChild(gallery("galleryCounter", image));
</script>
</body>
</html>
|
Спасибо
|
Чуть меньше кода...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.gallery-counter {
width: 300px;
margin: 20px auto;
text-align: center;
}
.gallery-counter img {
width: 300px;
height: 170px;
}
.gallery-counter button {
all: unset;
padding: 0 .5em;
}
</style>
</head>
<body>
<script>
function Gallery(imageURLs) {
if(this instanceof Gallery === false) return new Gallery(imageURLs);
this.element = document.createElement("div");
this.element.className = "gallery-counter";
var index = 1;
var image = new Image();
image.src = imageURLs[index];
this.element.appendChild(image);
for(var i = -1; i <=1; i += 2) {
var button = document.createElement("button");
button.textContent = i === -1 ? "◀" : "▶";
button.onclick = (function(i) {
return function() {
index = (index + i + imageURLs.length) % imageURLs.length;
image.src = imageURLs[index];
};
})(i);
this.element.appendChild(button);
}
return this.element;
}
document.body.appendChild(Gallery([
"http://s00.yaplakal.com/pics/pics_preview/5/3/6/12440635.jpg",
"http://s00.yaplakal.com/pics/pics_original/1/9/4/3736491.jpg"
]));
document.body.appendChild(Gallery([
"http://s00.yaplakal.com/pics/pics_preview/5/3/6/12440635.jpg",
"http://s00.yaplakal.com/pics/pics_original/1/9/4/3736491.jpg"
]));
</script>
</body>
</html>
|
Цитата:
[-1,1].forEach |
| Часовой пояс GMT +3, время: 14:39. |