滚动到下一个图像.onkeydown右箭头

Question

我试图制作它，以便我网站上的图片幻灯片可以通过左边和右边控制。右箭头。现在，图像通过点击滚动。看看我到目前为止所拥有的内容：www.p5js.khom.us

的jquery / JS：

//这是我尝试用于箭头的代码

function changeImage(dir) {
    var img = document.getElementById("poop");
    img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
}

document.onkeydown = function(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        changeImage(-1) //left <- show Prev image
    } else if (e.keyCode == '39') {
        // right -> show next image
        changeImage()
    }
}

//手风琴菜单和幻灯片

var $i = 1, length_img;

$(document).ready(function() {

$('[data-accordion]').accordion({ 'transitionSpeed': 400 });

$('.slide-link').click(function() {
 console.log('YES!');
var id = $(this).data('slide-id');
var $img = $('img[data-slide-id='+id+']');
if ($img.hasClass('current-slide')) return;
var $currentSlide = $('.current-slide');
 $currentSlide.fadeOut();
 $currentSlide.removeClass('current-slide');
 $img.addClass('current-slide');
 $img.fadeIn();
});


$('.slideshow img:last-child').addClass('last');
$('.slideshow').each(function(){
    length_img = $(this).children('img').length;
    $(this).next('.counter').children('p').html( '<span class="number">' + $i + '</span>' + ' of ' + length_img);

  });

$('.slideshow').children('img').click(function(){
    $(this).fadeOut();                                

    $('.slideshow img').removeClass('current-slide');
    length_img = $(this).parent('div').children('img').length;

    if($(this).hasClass('last')){
        $i = 0
        $(this).parent('div').children('img:first').addClass('current-slide').fadeIn();
        $(this).parent('div').next('.counter').children('p').html( '<span class="number">' + ($i+1) + '</span>' + ' of ' + length_img);
    }else{
        $i = $(this).parent('div').next('.counter').children('p').children('span').text();
        $i = parseInt($i);
        console.log($i+1)
        $(this).next('img').fadeIn().addClass('current-slide');
        $(this).parent('div').next('.counter').children('p').html( '<span class="number">' + ($i+1) + '</span>' + ' of ' + length_img);
    }        
});    

$('#navigation').localScroll({
   target:'#scrollable'
});

}）;

HTML：

<div class="content">

            <span id="id-01"></span>

                <div class="slideshow">

                    <img class="image image-tall" data-slide-id="1" src="images/apple9.jpg" alt="image" style="display:none;" onclick="changeImage()"/>

                    <img class="image image-tall" src="images/apple.gif" alt="image" style="display:none;"/>

                    <img class="image image-logo" src="images/apple11.jpg" alt="image" style="display:none;"/>

                </div>

            <div class="counter"><p></p></div>

            <div class="image-number">01</div>

        </div>

        <div class="content">

            <span id="id-02"></span>

                <div class="slideshow">

                    <img class="image image-wide" data-slide-id="2" src="images/apple1.jpg" alt="image" style="display:none;"/>

                    <img class="image image-wide" src="images/apple2.jpg" alt="image" style="display:none;"/>

                    <img class="image image-wide" src="images/apple3.jpg" alt="image" style="display:none;"/>

                </div>

            <div class="counter"><p></p></div>

            <div class="image-number">01</div>

        </div>