перелистывание изображений на mousemove

Question

Я пытаюсь перевернуть стек изображений с использованием функции mousemove, изменив свойство z-index изображения, относящегося к положению мыши. Я получаю консольную ошибку и не знаю, что ее вызывает. Я добавил несколько комментариев в код, чтобы сделать его более понятным. Я только начинаю с js, это может быть очень простая ошибка.

var $images = $('#images'), // caching elements 
    $img = $('img', $images), 
    l = $img.length; 

$('#images').mousemove(function(e){ 
    var xPos = e.pageX - this.offsetLeft; 
    w = $(this).width()/l; 
    xPos = Math.floor(xpos/w); //setting xPos variable equal to the mouse X position. 

    $img.css("z-index","0"); //assigning images z-index value to 0 
    if (xPos >= 0 && xPos < l) { 
     $img[xPos].css("z-index","1"); //changing 'current' (image relevant to xPos) z-index value to 1 !!!console error 'undefined'!!! 
    } 

}); 

FIDDLE

Answer 1

вопрос можно проследить к этой линии:

$img[xPos].css("z-index","1"); 

Это потому, что вы лечите $img[xPos] как объект JQuery, но на самом деле возвращает HTML-узел вместо этого. Вы должны пойти на:

$img.eq(xPos).css("z-index","1"); 

Fixed это :) проверить неподвижную скрипку здесь: http://jsfiddle.net/teddyrised/0qubpa7a/4/

р/с: Я также рекомендую объявляющие переменные с var заявления, просто чтобы быть в безопасности. Кроме того, не переписывайте значение xPos, вместо этого назначьте новую переменную :)