Функция eq(i).mouseover(function(){...}) не реагирует на изменение i...
Всем доброго времени суток.
Пишу скрипт галерейки и столкнулся с проблемой. HTML код галереи выглядит следующим образом: <div class="imgs_block_big"> <div id="1" class="img_item"></div> <div id="2" class="img_item"></div> <div id="3" class="img_item"></div> <div id="4" class="img_item"></div> <div id="5" class="img_item"></div> <div id="6" class="img_item"></div> </div> С соответствующими стилями и форматированием. Всё это дело оживляется следующим кодом: imgarr = ["../../images/test_big0.jpg", "../../images/test_big1.jpg", "../../images/test_big0.jpg", "../../images/test_big1.jpg", "../../images/test_big0.jpg", "../../images/test_big1.jpg"]; var param = { first : 1, last : 6, curnt : 3 }; function Start() { //отображает первоначальные 3 элемента: центральную картинку и 2 "кнопки" } $(document).load(function(){ Start(); }); $(document).ready(function(){ $("div.img_item").eq(param.curnt).mouseover(function(){ $("div.img_item").eq(param.curnt).animate({"left": "-=20px"}, "fast"); }); $("div.img_item").eq(param.curnt).mouseout(function(){ $("div.img_item").eq(param.curnt).animate({"left": "+=20px"}, "fast"); }); $("div.img_item").eq(param.curnt-2).mouseover(function(){ $("div.img_item").eq(param.curnt-2).animate({"left": "+=20px"}, "fast"); }); $("div.img_item").eq(param.curnt-2).mouseout(function(){ $("div.img_item").eq(param.curnt-2).animate({"left": "-=20px"}, "fast"); }); $("div.img_item").eq(param.curnt).click(function(){ var w_Gal = document.documentElement.clientWidth > 1020 ? document.documentElement.clientWidth : 1020; var betw_space = (w_Gal/2-150)+240; $("div.img_item").eq(param.curnt).css("left", (w_Gal-60)+"px"); if ((param.curnt) != param.last) { $("div.img_item").eq(param.curnt+1).css("left", (w_Gal+betw_space-80)+"px"); $("div.img_item").eq(param.curnt+1).css("background-image", "url('"+imgarr[param.curnt+1]+"')"); $("div.img_item").eq(param.curnt+1).css("visibility", "visible"); } for (var i = param.curnt-2; i <= param.curnt+1; i++) { $("div.img_item").eq(i).animate({"left": "-="+betw_space+"px"}, "slow"); } $("div.img_item").eq(param.curnt-2).css("visibility", "hidden"); param.curnt++; }); $("div.img_item").eq(cur_img-2).click(function(){ var w_Gal = document.documentElement.clientWidth > 1020 ? document.documentElement.clientWidth : 1020; var betw_space = (w_Gal/2-150)+240; $("div.img_item").eq(cur_img-2).css("left", "-240px"); if ((param.curnt-2) != param.first) { $("div.img_item").eq(param.curnt-3).css("left", (-240-betw_space)+"px"); $("div.img_item").eq(param.curnt-3).css("background-image", "url('"+imgarr[param.curnt-3]+"')"); $("div.img_item").eq(param.curnt-3).css("visibility", "visible"); } for (var i = param.curnt-3; i <= param.curnt; i++) { $("div.img_item").eq(i).animate({"left": "+="+betw_space+"px"}, "slow"); } $("div.img_item").eq(param.curnt).css("visibility", "hidden"); cur_img--; }); }); Поначалу всё работает нормально, но как только пролистываем галерею на одно изображение вправо или влево, то обработка событий ...mouseover(function(){...}); и ...mouseout(function(){...}); остаётся привязанной к тем же двум дивам, что и в начале (для первого изображения), а вот тела этих функций работают нормально (то есть анимируется нужный элемент). Подскажите, как вызывать обработчик, чтобы можно было динамически переназначать элементы, к которым он относится? Уже второй день с этим мучаюсь не могу ответ найти=( |
Часовой пояс GMT +3, время: 09:19. |