Question

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

    <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
          }
        });

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

Answer 1

如果您想在按下right时转到下一个，请触发图像上的click事件 -

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

Demo

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

完整代码。加价 -

<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');
        }
    });
});

左右箭头简单淡入淡出图像

1 个答案: