Есть код простенькой галереи изображений написанный мной. И вроде все работает, но меня не покидает ощущение, что это говнокод и мне нужно руки оторвать.
Вопрос, как его оптимизировать, как убрать глобальную переменную, и вообще как надо.
Заранее спасибо)
http://мкв-иркутск.рф/test.php
html:
<body >
<div id="wrupper" >
<div class="container">
<img class="gl_back" src="image/gl_back.png" />
<img class="gl_next" src="image/gl_next.png" />
<div class="gallery"><img src="" /></div>
<div class="gallery"><img src="" /></div>
<div class="gallery"><img src="" /></div>
<div class="gallery"><img src="" /></div>
</div>
</div>
</body>
JS:
var galleryArray = [
"image/test/test_01.png",
"image/test/test_02.png",
"image/test/test_03.png",
"image/test/test_04.png",
"image/test/test_05.png",
"image/test/test_06.png",
"image/test/test_07.png",
"image/test/test_08.png",
"image/test/test_09.png",
"image/test/test_10.png",
];
var counter = 0; // стчетчик изображений
$(function(){
setImage($('.gallery img'), galleryArray);
$('.gl_next').bind('click', function(){nextImage($('.gallery img'), galleryArray)});
$('.gl_back').bind('click', function(){backImage($('.gallery img'), galleryArray)});
});
function setImage(elemArray, array) {
var i, len;
for (i = 0, len = elemArray.length; i < len; i++){
elemArray[i].src = array[i]
};
};
function nextImage(elemArray, array) {
var len1 = elemArray.length;
var len2 = array.length - 1;
var i = counter;
if (counter >= len2) counter = 0;
else counter++;
for (var j = 0; j < elemArray.length; j++){
if (i >= len2) i = 0
else i++;
elemArray[j].src = array[i]
};
};
function backImage(elemArray, array) {
var len1 = elemArray.length;
var len2 = array.length - 1;
if (counter <= 0) counter = len2;
else counter--;
var i = counter;
for (var j = 0; j < elemArray.length; j++){
elemArray[j].src = array[i]
if (i >= len2) i = 0
else i++;
};
};