2

情况

我正在用 HTML、CSS 和 Javascript 构建一个基本的幻灯片。它基于 jquery 循环插件。幻灯片是简单的 li 项目，包含图像、文本或 iframe（例如 youtube，或只是另一个网页，即不是位于我的域上/可以控制的网页）。我有下一个和上一个按钮与 Jquery Keydown 一起工作，效果很好，目前用户不必使用鼠标在幻灯片中移动

问题

当我键入包含 iframe 的 li 时，如果用户单击 iframe，焦点将转移到 iframe（如您所料），并且为了移动下一张幻灯片，您必须重新聚焦到下一张或用鼠标单击以前的按钮。无论如何，无论页面中的焦点在哪里，是否都可以让页面监听父级中的 keydown 事件？

也可以的话

如果有一个解决方案还涉及在幻灯片处于活动状态时自动将 iframe 聚焦（以及保持下一个/上一个），例如您可以使用空格键播放/暂停youtube 视频，然后只需单击左移到下一张幻灯片。如果没有必要，我基本上不想使用鼠标。

下面的按键代码（您需要循环插件和我的一些代码才能使卡片组正常工作 - 我可以在必要时提供，但我觉得这里可以有一个通用的解决方案来持续监听可用于其他的按键事件上下文）

用于按键的 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

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

我希望这很清楚，任何帮助将不胜感激。任何解决方案都不必在每个浏览器中都支持，最低要求是它可以在 chrome 中运行。

谢谢！

4

0 回答 0