Чуть меньше кода...
<!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>