Question

我正在制作可点击的幻灯片，使用background-image:url()来显示图片。

出于某种原因，实现的键盘箭头控件不起作用并阻止一切。

知道怎么解决吗？ JSFiddle here以及下面的代码段。

$(".FS").each(function () {
    var $bg = $(this).find("> div"),
    n = $bg.length,
    c = 0;

    $bg.hide().on("click", function () {
        $bg.fadeOut().eq(++c % n).fadeIn();
    }).eq(c).show();
});

//keys
$(document).keypress(function (e) {
    if (e.keyCode == 37) {
        $('.FS').click();
    }

.FS {
    position:fixed;
    overflow:hidden;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}

.FS div {
    position:absolute;
    width:100%;
    height:100%;
    background: none 50% / cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="FS">
<div style="background-image:url(https://i.imgur.com/83ibckD.jpg)"> </div>
<div style="background-image:url(http://www.elevation9640.com/wp- content/uploads/2010/03/baby-goats.jpg)"></div>
<div style="background-image:url(http://waywardspark.com/wp-content/uploads/2011/04/DSC_0023.jpg)"></div>

背景幻灯片拒绝键盘控制

0 个答案: