箭头键更改图片Javascript

当您单击缩略图时，它将显示更大的图片，然后您可以使用箭头键（左键和右键）更改上一张/下一张图片

我不知道如何编码右箭头键以避免NaN值

当您继续按向右箭头键时，它将输出NaN值。我怎样才能避免呢？我如何期望值1,2,3,4，。。。。当我一直按向右箭头键时？这是我的HTML代码

<div class="col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="5" data-toggle="modal" data-title="Breast Revision Implant Exchange" data-caption="Before and After: Previous breast implants removed and exchanged with larger smooth round silcone implants followed by liposuction of the armpit/axillary and side of chest area" data-image="http://www.afbplasticsurgery.com/before-after-images/breast-revision-lateral-view-b-a.jpg" data-target="#image-gallery">
    <div class="ba-thumb">
      <table>
        <tbody>
          <tr>
            <td><img class="ba-thumbnail" src="http://www.afbplasticsurgery.com/before-after-images/thumb/breast-revision-b-lateral-view-150.jpg"></td>
            <td><img class="ba-thumbnail" src="http://www.afbplasticsurgery.com/before-after-images/thumb/breast-revision-a-lateral-view-150.jpg"></td>
          </tr>
          <tr>
            <td class="ba-note" colspan="2">Breast Revision Implant Exchange</td>
          </tr>
        </tbody>
      </table>
    </div>
    </a></div>
  <div class="clr"></div>

  <!-- end pic element -->

  <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="image-gallery-title"></h4>
        </div>
        <div class="modal-body">
          <center>
            <img id="image-gallery-image" class="img-responsive" src="">
          </center>
          <div class="modal-body-button">
            <div class="col-md-6">
              <span id="show-previous-image" class="previous-page"></span>
            </div>
            <div class="col-md-6">
              <span class="pull-right">
                <span id="show-next-image" class="next-page"></span>
              </span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="text-justify" id="image-gallery-caption">This text will be overwritten by jQuery </div>
        </div>
      </div>
    </div>
  </div>

}))

---

或者查看一下您的

当前图像

变量从未初始化。你有这个：

var current_image

这与：

var current_image = undefined;

因此，当您的代码第一次运行时，

current_image

不等于1，因此您的代码尝试将其递减：

if (current_image == 1) {
    current_image = 1;
} else {
    current_image--;
}

递减未定义的

将给您
NaN
：


因此，要解决这个问题，您需要为
当前_image
变量设置一个起始值

ex:
var current\u image=0

更新

好的，再次查看后，您可以在多个位置分配
current_image
变量

右键按下后，
current_image
值递增，然后调用
updateGallery
，在此函数中运行以下行；这是它获取
未定义值的地方：

current_image = $sel.data('image-id');

这意味着，图像id无效。
好的，我留下我以前的答案，因为我在那里发现的所有问题都是有效的。但是，代码太过破烂，无法继续逐个问题进行修复。我很无聊，决定把一切都修好

以下是更新的和固定的代码：

$(document).ready(function () {
    // initial and max value of 0
    var current = 0, max = 0;

    // load up the gallery
    loadGallery(true, 'a.thumbnail');

    function navigate(forward) {
        if (forward && current <= max) {
            current++;
        } else if (current >= 1) {
            current--;
        }

        console.log('showing ' + current + 'th image');
        updateDetails();
        disableButtons();
    }

    function updateDetails() {
        console.log('updating details for ' + current + 'th image');
        var $sel = $('[data-image-id="' + current + '"]');
        $('#image-gallery-caption').text($sel.data('caption'));
        $('#image-gallery-title').text($sel.data('title'));
        $('#image-gallery-image').attr('src', $sel.data('image'));
        $('#image-gallery-link a').text($sel.data('title'));
        $('#image-gallery-link a').attr('src', $sel.data('href'));
    }

    function disableButtons() {
        console.log('in disable, (current=' + current + ', max=' + max + ')');
        if (current == max) {
            console.log('disabling next');
            $('#show-next-image').hide();
            $('#show-previous-image').show();
        } else if (current == 0) {
            console.log('disabling previous');
            $('#show-next-image').show();
            $('#show-previous-image').hide();
        }
    }

    // loads the gallery and sets observers
    function loadGallery(setIDs, setClickAttr) {
        if (setIDs) {
            $('[data-image-id]').each(function(i, e) {
                console.log('setting id for image: ' + i);
                $(this).attr('data-image-id', (max = i));
            });
        }

        $(document).keydown(function (e) {
            var code = e.keyCode || e.which;
            e.preventDefault();

            switch (code) {
                // left key
                case 37: navigate(false); break;
                // right key
                case 39: navigate(true); break; 
                default:;
            }
        });

        $('#show-next-image, #show-previous-image').click(function () {
            navigate($(this).attr('id') === 'show-next-image');
        });

        $(setClickAttr).on('click', function() {
            current = $(this).attr('data-image-id');
            console.log('clicked the ' + current + 'th image...');
            updateDetails();
            disableButtons();
        });
    }
});

$（文档）.ready（函数（）{
//初始值和最大值为0
无功电流=0，最大值=0；
//把画廊装好
loadGallery（正确的“a.thumbnail”）；
功能导航（前进）{
如果（正向和当前=1）{
当前--；
}
console.log（'显示'+current+'th image'）；
updateDetails（）；
禁用按钮（）；
}
函数updateDetails（）{
console.log（'正在更新'+current+'th image'的详细信息'）；
var$sel=$（'[data image id=“'+current+'”）；
$（“#图像库标题”）.text（$sel.data（'caption'））；
$（“#图像库标题”）.text（$sel.data（'title'）；
$（'#image gallery image'）.attr（'src'，$sel.data（'image'））；
$（'#图像库链接a'）.text（$sel.data（'title'））；
$（'#图像库链接a'）.attr（'src'，$sel.data（'href'））；
}
功能禁用按钮（）{
log（'in disable，（current='+current+'，max='+max+'）；
如果（当前==最大值）{
log（'disablenext'）；
$（“#显示下一幅图像”）.hide（）；
$（“#显示上一张图像”）.show（）；
}否则如果（当前==0）{
console.log（“禁用以前的”）；
$（“#显示下一幅图像”）.show（）；
$（“#显示上一张图像”）.hide（）；
}
}
//加载库并设置观察者
函数loadGallery（setID、setClickAttr）{
if（setid）{
$（“[data image id]”）。每个（函数（即，e）{
console.log（'设置图像的id:'+i）；
$（this.attr（'data-image-id'，（max=i））；
});
}
$（文档）.keydown（函数（e）{
var代码=e.keyCode | | e.which；
e、 预防默认值（）；
开关（代码）{
//左键
案例37：导航（错误）；中断；
//右键
案例39：导航（true）；中断；
违约：；
}
});
$（“#显示下一幅图像，#显示上一幅图像”）。单击（函数（）{
导航（$（this.attr（'id'）=='show next image'）；
});
$（setClickAttr）.on（'click'，function（）{
当前=$（this.attr（'data-image-id'）；
log（'单击'+current+'第个图像…'）；
updateDetails（）；
禁用按钮（）；
});
}
});


PS：如果你只是使用了一个调试器，你也可以修复它。
感谢您的快速响应。我已为当前_映像启动值var current_映像，选择器，计数器=0；这是一个链接，如果你不介意看看。我知道只有当我们一直按向右箭头键时，才会发生这种情况。你有没有办法修复当前的_image=$sel.data（'image-id'）；谢谢你！很抱歉再问你一次，我怎样才能解决这个问题？我还没弄明白你有没有去检查一下？我刚检查过，非常感谢@epoch！！我只是接受了我不能投票的事实。这是我在stackoverflow的第一次：）
$(document).ready(function () {
    // initial and max value of 0
    var current = 0, max = 0;

    // load up the gallery
    loadGallery(true, 'a.thumbnail');

    function navigate(forward) {
        if (forward && current <= max) {
            current++;
        } else if (current >= 1) {
            current--;
        }

        console.log('showing ' + current + 'th image');
        updateDetails();
        disableButtons();
    }

    function updateDetails() {
        console.log('updating details for ' + current + 'th image');
        var $sel = $('[data-image-id="' + current + '"]');
        $('#image-gallery-caption').text($sel.data('caption'));
        $('#image-gallery-title').text($sel.data('title'));
        $('#image-gallery-image').attr('src', $sel.data('image'));
        $('#image-gallery-link a').text($sel.data('title'));
        $('#image-gallery-link a').attr('src', $sel.data('href'));
    }

    function disableButtons() {
        console.log('in disable, (current=' + current + ', max=' + max + ')');
        if (current == max) {
            console.log('disabling next');
            $('#show-next-image').hide();
            $('#show-previous-image').show();
        } else if (current == 0) {
            console.log('disabling previous');
            $('#show-next-image').show();
            $('#show-previous-image').hide();
        }
    }

    // loads the gallery and sets observers
    function loadGallery(setIDs, setClickAttr) {
        if (setIDs) {
            $('[data-image-id]').each(function(i, e) {
                console.log('setting id for image: ' + i);
                $(this).attr('data-image-id', (max = i));
            });
        }

        $(document).keydown(function (e) {
            var code = e.keyCode || e.which;
            e.preventDefault();

            switch (code) {
                // left key
                case 37: navigate(false); break;
                // right key
                case 39: navigate(true); break; 
                default:;
            }
        });

        $('#show-next-image, #show-previous-image').click(function () {
            navigate($(this).attr('id') === 'show-next-image');
        });

        $(setClickAttr).on('click', function() {
            current = $(this).attr('data-image-id');
            console.log('clicked the ' + current + 'th image...');
            updateDetails();
            disableButtons();
        });
    }
});