Вы связываете события, но никогда не отменяете их.
var click_img = function() {
...
$(gal_prev).bind('click',click_img);
$(gal_next).bind('click',click_img);
...
}
Нажмите один раз, и click_img
выполнится один раз, добавив обработчик события в gal img. Нажмите еще раз, и оба старых обработчика событий click_img
и вновь связанный обработчик событий click_img
будут выполнены. Каждый добавляет другую копию click_img
в список обработчиков событий. Теперь у вас есть четыре обработчика событий. Нажмите еще раз, и у вас будет восемь, и так далее ... на десять кликов у вас есть тысяча обработчиков событий, и неудивительно, что браузер останавливается, пытаясь вызвать их всех.
Связывание и открепление множества событий - это боль. Давайте упростим наличие одного обработчика событий для всех imgs:
var divs= $('#gal_container>div');
var activei= 0;
divs.click(function() {
// Find div number and number of left and right div
// only allow click if the left or right div was clicked
//
var divi= divs.index(this);
var nexti= (divi-1+divs.length)%divs.length;
var previ= (divi+1)%divs.length;
var isadjacent= activei===nexti || activei===previ;
activei= divi;
if (!isadjacent) return;
// Set classes on each div to reflect new state
//
divs.each(function(i) {
$(this).toggleClass('gal_active', i===divi);
$(this).toggleClass('gal_left', i===previ);
$(this).toggleClass('gal_right', i===nexti);
$(this).toggleClass('gal_img', i!==nexti && i!==previ && i!==divi);
});
});
Если вам не нужно ограничивать клики только левым и правым делением, вы можете потерять isadjacent
и activei
полностью. Было бы нормально разрешить клик по любому элементу в галерее.
(Также вы обычно оставляете класс gal_img
при каждом делении.)