我制作了一个小型网站,在其中我必须像简报一样做。我有多张幻灯片。我已经隐藏了滚动条和无效的滚动条。在幻灯片之间导航的唯一方法是使用箭头键和幻灯片中包含的链接。

这是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");
        };
    });

});

最佳答案

我会坚持使用jquery,因为它可以处理各种浏览器。我会做一些改进


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

10-05 20:36
查看更多