用js实现一个页面可以用键盘左右方向键控制两张图片切换 5

两张图片在同一个位置,可以是替换或者覆盖。要求使用原生JS... 两张图片在同一个位置,可以是替换或者覆盖。要求使用原生JS 展开
 我来答
匿名用户
2019-04-10
展开全部
用js的 event.keyCode来获取方向键。

从网上你可以查到左右方向键对应的keyCode值,这样你就能获取到左右键点击事件了。
然后当左右键点击的时候,触发显示和隐藏对应图片的功能。
图片的显示和隐藏,你可以用js给对应的图片添加显示或者隐藏的css。
这样就能实现你要的效果了
追问
有要求用原生js实现...
追答
如果你想简单点,给2张图片设置不同的id
当点击左的时候,给第一张图显示的css,第二张隐藏的css。点击右的时候也添加对应的css。
lxs_lingting
2019-04-10 · TA获得超过990个赞
知道小有建树答主
回答量:899
采纳率:100%
帮助的人:515万
展开全部

支持多张图片

<html>

<head>
    <title>循环</title>
    <style>
        img {
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="divImg">
        <img src="https://tb2.bdstatic.com/tb/static-common/img/search_logo_big_v1_8d039f9.png" />
        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png" style="display: none;" />
        <img src="http://s1.bdstatic.com/r/www/cache/mid/static/xueshu/img/logo_4b1971d.gif" style="display: none;" />
    </div>
    <script type="text/javascript" charset="UTF-8">
        var n = 0;
        var arr = document.getElementsByTagName('img');
        document.onkeydown = function (event) {
            for (var i = 0; i < arr.length; i++) {
                arr[i].style.display = 'none';
            }
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 37) { // 按 <-
                n--;
                if (n < 0) {
                    n = arr.length - 1;
                }
            }
            if (e && e.keyCode == 39) { // 按 -> 
                n++;
                if (n >= arr.length) {
                    n = 0;
                }
            }
            arr[n].style.display = 'block';
        };
    </script>
</body>

</html>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式