javascript - 无法联系到 div 内的第 n 个子 img

Question

我有这个 fiddle ，我想在默认情况下仅显示第一张照片并隐藏其余照片，并通过每次鼠标滚动更改照片。 var i 由 mousescroll 确定，如果 i < 1 或 i > 5，我希望操作中断，因为没有第 n 个大于 5 或​​小于 1 的子级。

请在您的答案中提供一些信息。谢谢。

<强> http://jsfiddle.net/a8FGe/6/

$(window).scroll(function(event){
   var i = 0;
   var st = $(this).scrollTop();
   if (st > 0)
   {
       var i += 1;
       if (i > 5)
       {
           return;
       }
       $("img").hide();
       $("img:nth-child(" + i + ")").show();
   }
    else
   {
       var i -= 1;
       if (i < 0)
       {
           return;
       }
       $("img").hide();
       $("img:nth-child(" + i + ")").show();
   }
});

Answer 1

您正在寻找这样的东西吗？

<强> http://jsfiddle.net/a8FGe/7/

var i = 1;
$(document).bind('mousewheel', function (e) {

    if (e.originalEvent.wheelDelta < 0) { // scroll down
        if (i + 1 <= 5)
            i++;
        else
            return;

    } else {
        if (i - 1 >= 1)
            i--;
        else
            return;

    }
    //console.log(i);
    $("img").hide();
    $("img:nth-child(" + i + ")").show();
});