Question

情况

我正在构建一个基本的HTML幻灯片，CSS和CSS的JavaScript。它基于jquery循环插件。幻灯片是简单的项目，包含图片，文字或iframe（例如youtube，或只是另一个网页，但不是我的域上/可以控制的网页）。我有使用Jquery Keydown的下一个和前一个按钮，它运行良好，目前用户不必使用鼠标移动幻灯片

问题

当我键入包含iframe的li时，如果用户点击iframe，焦点会转移到iframe（正如您所期望的那样），并且为了移动下一张幻灯片，您必须重新聚焦到单击鼠标即可显示下一个或上一个按钮。无论如何都要保持页面监听父级中的keydown事件，无论页面中的焦点位于何处？

如果可能的话

如果有一个解决方案还涉及自动将iframe置于焦点（以及维持我提到的下一个/上一个），当幻灯片处于活动状态时会很好，例如你可以使用空格键来播放/暂停YouTube视频，然后只需单击左键即可移动到下一张幻灯片。如果没有必要，我基本上不想使用鼠标。

下面的按键代码（你需要循环插件和我的一些代码才能让甲板工作 - 如果有必要我可以提供但我觉得这里可以有一个通用的解决方案来持续监听可能的keydown事件在其他情况下使用）

按键的Jquery

    $(document).ready(function () { 
        $("body").keydown(function(e) {
            if(e.keyCode == 37) { // left
                $("#prev").click();
                return false;
                }
            else if(e.keyCode == 39) { // right
                $("#next").click();
                }

        });
    });

HTML

<body>


<ul class="images">

    <!-- Basic slide example -->

    <li class="wrapper" title="test slide 01"></li>


    <!-- Example with iframe -->

    <li class="wrapper" title="test slide 02" >
    <iframe width="100%" height="100%" id="iframe" 
    src="http://www.youtube.com/embed/BlpwHBn6ikg?wmode=transparent" frameborder="0" allowfullscreen>   
    </iframe>
    </li>



</ul>

    <div id="prev">
    </div>
    <div id="next">
    </div>

循环插件我正在使用

http://malsup.github.io/jquery.cycle.all.js

我的选择

$(function() {var index=0,hash=window.location.hash;if(hash){index=/\d+/.exec(hash)[0];index=(parseInt(index)||1)-1;}  
    $('.images')
    .before('<div id="nav">') 
    .cycle({
        prev:   '#prev',
        next:   '#next',
        timeout: 0,
        slideResize: 0,
        containerResize: 0,
        startingSlide:index,
        pager:  '#nav',
        before: onBefore,
        pagerAnchorBuilder: function(i, slide) {
        return '<a href="#"><p>' + $(slide).attr('title') + ' </p></a>';},
        after:function(curr,next,opts){window.location.hash=opts.currSlide+1;}
        });

        function onBefore() { 
            $('#caption') 
            .html(this.h1); 
        };

}); 

function setSlide(index) {
            $('.images').cycle(index);
        }

CSS for prev＆amp;下

#prev, #next{
width: 40px;
height: 100%;
position: absolute;
bottom: 90px;
cursor: pointer;
z-index: 1100;

我希望这很清楚，任何帮助都会非常感激。任何解决方案都不必在每个浏览器中都受支持，最低要求是它在chrome中工作。

谢谢！

无论焦点如何，都要继续监听jquery keydown事件

0 个答案: