键处理事件--使用键盘上的左右箭头产看幻灯片的切换

最新推荐文章于 2022-08-14 15:21:41 发布

刘老shi

最新推荐文章于 2022-08-14 15:21:41 发布

阅读量980

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/fighterna/article/details/53486179

版权

首先介绍一下onkeydown事件，网页的访问者通过使用键事件处理程序，可以在用户按下适当的键时执行相应的操作。
如图所示
幻灯片的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Image Slideshow</title>
    <link rel="stylesheet" href="script08.css">
    <script src="script08.js"></script> 
</head>
<body>
    <h3 class="centered">
        <img src="images/callisto.jpg" id="myPicture" alt="Slideshow"><br>
        Use the right and left arrows on your keyboard to view the slideshow
    </h3>
</body>
</html>

CSS较简单，此处省略。
JS脚本如下：

document.onkeydown = keyHit;
var thisPic = 0;

function keyHit(evt) {
    var myPix = new Array("images/callisto.jpg", "images/europa.jpg","images/io.jpg", "images/ganymede.jpg");
    var imgCt = myPix.length-1;
    var ltArrow = 37;
    var rtArrow = 39;

    if (evt) {
        var thisKey = evt.which;
    }
    else {
        var thisKey = window.event.keyCode;
    }

    if (thisKey == ltArrow) {
        chgSlide(-1);
    }
    else if (thisKey == rtArrow) {
        chgSlide(1);
    }

    function chgSlide(direction) {
        thisPic = thisPic + direction;
        if (thisPic > imgCt) {
            thisPic = 0;
        }
        if (thisPic < 0) {
            thisPic = imgCt;
        }
        document.getElementById("myPicture").src = myPix[thisPic];
    }
}

document.onkeydown = keyHit;这里将keyHit()函数注册为onkeydown事件处理的函数。

var ltArrow = 37;
var rtArrow = 39;左右箭头产生的数字分别是37和39，两个if语句：
if (thisKey == ltArrow) 和else if (thisKey == rtArrow)判断访问者按下的键是左键还是右键，判断之后分别执行相应的操作。

记得注意的是，
if (evt) { var thisKey = evt.which; } else { var thisKey = window.event.keyCode; }
理解用户按下了哪个键取决于浏览器，如果是Firefox、chrome或者Safari，就查看evt.which,这个属性包含键的编码。如果是IE浏览器，那么编码包含在window.event.keyCode中。

刘老shi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
键处理事件--使用键盘上的左右箭头产看幻灯片的切换

首先介绍一下onkeydown事件，网页的访问者通过使用键事件处理程序，可以在用户按下适当的键时执行相应的操作。幻灯片的HTML：<!DOCTYPE html><html><head> <title>Image Slideshow</title> <link rel="stylesheet" href="script08.css"> <script src="sc
复制链接

扫一扫