我制作了一个小型网站,在其中我必须像简报一样做。我有多张幻灯片。我已经隐藏了滚动条和无效的滚动条。在幻灯片之间导航的唯一方法是使用箭头键和幻灯片中包含的链接。
这是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()进行检索并将其单独添加。