Форум

Marson · #1 (**permalink**) 22.12.2018, 15:48

Напилите функцию, которая создает галерею картинок в определенном контейнере. В качестве параметра передавайте 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));

Как сделать, что бы при нажатии на кнопку появлялась следующая картинка, а не как у меня две вывелись и кнопки не работают почему-то..

рони · #2 (**permalink**) 22.12.2018, 18:05

Marson,
изменили current, затем проверили и если вышли за границы массива изменили ещё раз

рони · #3 (**permalink**) 22.12.2018, 18:33

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>

Marson · #4 (**permalink**) 25.12.2018, 15:33

Спасибо

Malleys · #5 (**permalink**) 27.12.2018, 22:23

Чуть меньше кода...

<!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>

рони · #6 (**permalink**) 28.12.2018, 09:14

Сообщение от Malleys

Чуть меньше кода...

[-1,1].forEach

Форум

Справочник

Discord чат

Курсы javascript