Форум

Darth_Danius · #1 (**permalink**) 07.02.2016, 16:08

Есть код простенькой галереи изображений написанный мной. И вроде все работает, но меня не покидает ощущение, что это говнокод и мне нужно руки оторвать.
Вопрос, как его оптимизировать, как убрать глобальную переменную, и вообще как надо.
Заранее спасибо)

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++;
	};
};

polecat · #2 (**permalink**) 11.02.2016, 13:26

А зачем len1 объявляешь?
Не используешь же ни где.

Ну и вместо глобальной переменной можно замыкание использовать.
Не знаю только, нужно ли

рони · #3 (**permalink**) 11.02.2016, 14:09

Darth_Danius,
http://javascript.ru/forum/showthrea...600#post383965

polecat · #4 (**permalink**) 11.02.2016, 16:45

Может как-то так?

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",
];


$(function(){
    var position = counter(); // используем замыкание
	setImage($('.gallery img'), galleryArray);
	$('.gl_next').bind('click', function(){nextImage($('.gallery img'), galleryArray, position(1))});
	$('.gl_back').bind('click', function(){nextImage($('.gallery img'), galleryArray, position(-1))});
});


function counter () { // функция, возвращающая текущую позицию первого показываемого элемента
    var len = galleryArray.length; 
    var count = 0;  // текущая позиция первого показываемого элемента
    
    return function (direction) { // direction - направление перелистывания (1 вперёд : -1 назад)
        if (count + direction < len) {
            (count + direction > 0) ? count = count + direction: count = len - 1; 

// если не понятна сокращённая запись, вот полная:                
//            if (count + direction > 0) { 
//                count = count + direction; 
//            } else {
//                count = len - 1; //последний элемент массива galleryArray
//            }
        } else {
            count = 0;
        }
        return count;
    }
}


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, counter) {
    var lastElement = galleryArray.length - 1;
	var i = counter;
		
	for (var j = 0; j < elemArray.length; j++){ 
		elemArray[j].src = array[i]
		(i < lastElement) ? i++ : i = 0;
	};
};

Darth_Danius · #5 (**permalink**) 13.02.2016, 07:06

Спасибо, так лучше!

Форум

Справочник

Discord чат

Курсы javascript