用js实现一个页面可以用键盘左右方向键控制两张图片切换
最新回答
捣碎幻觉
2022-01-21 14:33:48
从网上你可以查到左右方向键对应的keyCode值，这样你就能获取到左右键点击事件了。
然后当左右键点击的时候，触发显示和隐藏对应图片的功能。
图片的显示和隐藏，你可以用js给对应的图片添加显示或者隐藏的css。
这样就能实现你要的效果了
不爱。就_滚_
2023-09-30 11:27:31
支持多张图片
<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>
热门标签
