1

当前脚本工作正常，但我需要使用左箭头转到上一张图像，使用右箭头转到下一张。

    <script type="text/javascript">
        var $images;
        var goNext = function() {
            var $this = $(this),
                $next = $this.next('img').length > 0 ? $this.next('img') : $this.siblings('img').eq(0);
            $this.hide();
            $next.show();
            return false;
        };
        $(document).ready(function(){
            $images = $('.images img');
            $images.eq(0).siblings().hide();
            $images.on('click', goNext);
        });
    </script>

如何使用以下内容来控制图像滑入和滑出？

        $("body").keydown(function(e) {
          if(e.keyCode == 37) { // left
          }
        });

如果我想使用左箭头返回，我需要做什么？

4

1 回答 1

2

如果您想在right按下时进行下一步，请在图像上触发click事件 -

$("body").keydown(function (e) {
    if(e.keyCode == 39) { // right
        $('.images img:visible').trigger('click');
    }
});

演示。

我相信现在你可以调整它的双向导航。

完整代码。标记 -

<div class="images">
    <img src="images/1.jpg" width="1920" alt="1">
    <img src="images/2.jpg" width="1920" alt="2">
    <img src="images/3.jpg" width="1920" alt="3">
    <img src="images/4.jpg" width="1920"  alt="4">
    <img src="images/5.jpg" width="1920"  alt="5">
    <img src="images/6.jpg" width="1920" alt="6">
    <img src="images/7.jpg" width="1920" alt="7">
    <img src="images/8.jpg" width="1920" alt="8">
    <img src="images/9.jpg" width="1920" alt="9">
    <img src="images/10.jpg" width="1920" alt="10">
</div>

JavaScript -

$(document).ready(function () {
    var $images;
    var goNext = function (event, direction) {
        var $this = $(this),
            $next;

        if (direction == 'left') {    
            $next = $this.prev('img').length > 0 ? 
                    $this.prev('img') : 
                    $this.siblings('img:last');
        }
        else {
            $next = $this.next('img').length > 0 ? 
                    $this.next('img') : 
                    $this.siblings('img:first');
        }

        $this.hide();
        $next.show();

        return false;
    };

    $images = $('.images img');
    $images.eq(0)
        .siblings()
        .hide();
    $images.on('click', goNext);

    $("body").keydown(function(e) {
        if (e.keyCode == 39) { // right
            $('.images img:visible').trigger('click', 'right');
        }
        else if (e.keyCode == 37) { // left
            $('.images img:visible').trigger('click', 'left');
        }
    });
});
于 2013-09-04T10:37:48.800 回答