Question

我创建了一个小网站，我必须像powerpoint一样。我有多张幻灯片。我隐藏了滚动条和可滚动的滚动条。在幻灯片之间导航的唯一方法是使用箭头键和幻灯片中的链接。

这里是HTML代码：

  <section id="s00" class="page slide">

    <a href="#s01" class="nextSlide"></a>
  </section>
  <section id="s01" class="page slide">

    <a href="#s02" class="nextSlide"></a>
  </section>
  <section id="s02" class="page slide">

    <a href="#s03" class="nextSlide"></a>
  </section>
  <section id="s03" class="page slide">

    <a href="#s04" class="nextSlide"></a>
  </section>

我已成功制作一个jQuery脚本，用于在带箭头键的幻灯片之间导航，但我在javaScript中的表现不是很好，我想知道是否有更有效/更清洁/更短的方法同一件事情。我们的想法是使用箭头键修改页面锚点。这是我的jQuery代码：

$(document).ready(function(){
    function upDown($dir){
        $url = document.URL; /*The current URL ex: http://***/presentation#s02 */
        $anchorNum = parseInt($url.slice(-2), 10); /*Get the anchor number from the current url ex: 02*/
        $urlNoAnchor =  $url.slice(0, -2); /*Get the base url without anchor number ex: http://***/presentation#s*/
        if ($dir == "up") { /*Increment or decrement the anchor number, up because the previous slide is up */
            if($anchorNum > 0){ /*We can't go under 0*/
                $newAnchor = $anchorNum - 1;
            }
            else{
                return;
            }
        } else{
            $newAnchor = $anchorNum + 1;
        };
        if ($newAnchor <= 9) {$newAnchor = "0"+$newAnchor}; /*if the anchor is equal or smaller than 10, need to add zero for keeping two units*/
        window.location.replace($urlNoAnchor + $newAnchor); /*Finally, redirect to the next or previous anchor*/
    };

    $(this).keydown(function(e) {
        switch(e.which) {
            case 37: // left
                upDown("up");
            break;

            case 38: // up
                upDown("up");
            break;

            case 39: // right
                upDown("down");
            break;

            case 40: // down
                upDown("down");
            break;

            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });
});

感谢您的建议/帮助，帮助我制作更好的代码：）

编辑： - 我知道我的代码限制为两位数锚（00到99），因为我从URL获取锚号的方式。对于我的项目，这不是问题，我永远不会有100张幻灯片，但如果你知道一种方法（0到∞），我有兴趣学习。 - 对我来说，parseint也很难保持领先0，我不知道我是否做得好。

此处演示文稿的页面为：http://dubebenjamin.com/presentation/presentation#s00

最后，这是我在建议之后制作的代码：

$(document).ready(function(){
    //Utilisation du clavier pour naviguer entre les slides
    $url = window.location;

    function upDown($dir){
        $hash =$url.hash.substring(1);
        $hashInt= parseInt($hash);
        if ($dir == "down") {
            $newAnchor = $hashInt + 1;
        } else if($hashInt > 0){
            $newAnchor = $hashInt - 1;
        };
        window.location.hash = $newAnchor;
    };

    $(this).keydown(function(e) {
        $key = (e.which);
        if ($key == 37 || $key ==38) { // left or top
            upDown("up");
        } else if($key == 39 || $key ==40){ // right or bottom
            upDown("down");
        };
    }); 

});

Answer 1

我会坚持使用jquery，因为它可以处理各种浏览器。我会做几个改进

将urlNoAnchor存储在变量中，而不是每次都查找它。
我会使用普通的if / else条件而不是switch case，因为它只是两个条件。
您可以使用window.location.hash来获取和设置网址的哈希部分。您不必使用slice（）进行检索并单独附加它。

Answer 2

这是一种让关键事件发生的简单方法：

window.addEventListener("keyup",keyUp);

function keyUp(event_){
    switch(event_.keyCode){
        case 36:
            /* Left. */
            /* Your code for left key up here. */
        break;
            /* The other key cases... */
    }
}

如果您想要更模块化的内容，您可以随时将键值向上或向下存储为布尔值，而不仅仅是"keyup"或"keydown"个事件。

您可以将键值存储在对象中：

var keys={left:false};

window.addEventListener("keydown",keyDown);

function keyDown(event_){
    switch(event_.keyCode){
        case 36:
            keys.left=true;
        break;
    }
}

但这是简单的JavaScript。如果您的幻灯片导航是4方向，有点像基于图块的游戏地图，也许您应该将锚点存储为数组中的字符串。例如：

var slide_map=["anchor00","anchor01",
               "anchor10","anchor11"];
var slide_x=0;
var slide_y=0;

function getAnchorToAppendToURL(slide_x_,slide_y_){
    /* The value 2 is the number of columns in the slide map. */
    /* For this example slide map has 2 rows and 2 columns. */
    /* This formula is very simple and rids the world of 2d arrays. */
    return slide_map[slide_y_*2+slide_x_];
}

/* Inside the keyup event handler, the left key has been unpressed. */
case 36:
    /* Move slide_x position to the left, but don't let it go below 0. */
    slide_x=slide_x>0?slide_x-1:0;
break;
/* Then after your switch statement: */
window.location.replace($urlNoAnchor+getAnchorToAppendToURL(slide_x,slide_y));

不确定这是否是您正在寻找的内容，但您可以通过四个方向浏览幻灯片。如果您知道所有主播名称，并且他们设置为：＆＃34; anchorXY＆＃34;，您可以完全避免使用数组，只需说：

window.location.replace($urlNoAnchor, String("anchor"+slide_x_+slide_y_));

Answer 3

那么，我将如何做到这一点如下：

/* Example url. */
/* example.com#s0 */

/* Say you have 10 slides. */
var max_slides=10;
/* Get the window url. */
var url=window.location.url;
/* Get the current anchor_index on page load. */
if (url.indexOf("#")!=-1){
    /* The page loaded with a hashtag, so you probably have your anchor specified in the url. */
    /* The +2 moves the start indext past "#s" in the url. */
    var anchor_index=parseInt(url.slice(url.indexOf("#")+2,url.length),10);
}else{
    /* Otherwise just set the start index to 0. */
    anchor_index=0;
}

window.addEventListener("keyup",keyUp);

function keyUp(event_){
    switch(event_.keyCode){
        case 36:
            /* If anchor_index is greater than 0, subtract 1, otherwise set it to zero. */
            anchor_index=anchor_index>0?anchor_index-1:0;
        break;
        case 38:
            /* If anchor is less than max slides, add 1, otherwise set to max_slides. */
            anchor_index=anchor_index<max_slides?anchor_index+1:max_slides;
        break;
    }

    /* Load up the new page. */
    window.location.href="example.com#s"+anchor_index;
    /* Or you can work the new anchor into the original url with the replace method. */
}

我希望这更像你正在寻找的东西。

使用箭头键javascript和/或jQuery增加html锚点

3 个答案: