概述
为了满足你提到的需求：给定一个 URL 数组，通过左右箭头键控制页面跳转，且对于数组中的第一个页面不触发上一页，最后一个页面不触发下一页，我们可以做一些逻辑判断，确保不会超出数组的边界。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘左右键跳转</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
</head>
<body>
<div>
<h1>键盘左右键跳转</h1>
<p>使用左箭头和右箭头键来跳转页面。</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
<script>
// 假设你有一个URL数组
const urls = [
'page1.html', // 第一个页面
'page2.html', // 第二个页面
'page3.html', // 第三个页面
'page4.html' // 最后一个页面
];
let currentIndex = 0; // 当前页面的索引
// 更新当前页面的 URL
function updatePage() {
window.location.href = urls[currentIndex];
}
// 监听键盘按键
document.addEventListener('keydown', function (e) {
if (e.key === "ArrowLeft") {
// 按下左箭头时跳转到上一页，且不能超出数组边界
if (currentIndex > 0) {
currentIndex--; // 向前跳转
updatePage();
} else {
console.log("已经是第一页，无法再跳转到上一页。");
}
} else if (e.key === "ArrowRight") {
// 按下右箭头时跳转到下一页，且不能超出数组边界
if (currentIndex < urls.length - 1) {
currentIndex++; // 向后跳转
updatePage();
} else {
console.log("已经是最后一页，无法再跳转到下一页。");
}
}
});
// 初始页面跳转
updatePage();
</script>
</body>
</html>关键点说明：
URL 数组：
urls数组保存了所有页面的 URL。你可以根据需要自定义这个数组。currentIndex变量：用来记录当前页面在数组中的索引，初始值为 0。updatePage()函数：根据currentIndex跳转到相应的页面。按键事件处理：
当按下左箭头（
ArrowLeft）时，只有当前页面不是第一个页面时，才会跳转到上一页（currentIndex > 0）。当按下右箭头（
ArrowRight）时，只有当前页面不是最后一个页面时，才会跳转到下一页（currentIndex < urls.length - 1）。边界判断：确保不会在第一个页面时再跳转到上一页，也不会在最后一个页面时再跳转到下一页。
使用说明：
你可以根据实际需求修改
urls数组中的 URL。页面会自动跳转到数组中的第一个页面，并根据键盘左右箭头控制页面跳转。
这种方式可以确保当你在页面数组的第一个页面时，不会触发上一页，最后一个页面时也不会触发下一页。
最后
以上就是名字长了才好记为你收集整理的js实现跳转, 达到第一个页面不在触发跳转上一页, 达到最后一个不在触发下一页的全部内容，希望文章能够帮你解决js实现跳转, 达到第一个页面不在触发跳转上一页, 达到最后一个不在触发下一页所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复