老师请解答一下谢谢
来源：7-2 揭秘案例bug值解决第三个bug
慕容5109188
2019-09-20 21:09:06
$(document).ready(function () {
// 鼠标移上去后显示当前图片，其他图片透明隐藏
$("a").mouseenter(function () {
$("img").eq($(this).index()).css({'opacity':'1'}).siblings().css({'opacity':'0'});
});
// 键盘按下后切换图片
//这里只能按右键按左键获取不到，应该怎么改？
var index = 0;
$(document).keydown(function (event) {
if (event.keyCode == 37){
index = index>0 ? --index : $("a").length-1;
}else {
if (event.keyCode == 39){
index = index < $('a').length-1 ? ++index : 0;
}else {
return true;
}
$("img").eq(index).css({'opacity':'1'}).siblings().css({'opacity':'0'});
}
});
});
3回答
-
你好同学，这是因为如下代码放在了else中，当点击左边的箭头，执行if。else中的切换图片代码就不会执行：
把它放在外边即可，如下：
祝学习愉快，望采纳。
0 -
慕容5109188
提问者
2019-09-23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" href="CSS/style2.css" rel="stylesheet">
</head>
<body>
<body style="zoom: 1;">
<span></span>
<nav>
<a href="#" src="">泸沽湖</a>
<a href="#" src="">丽江</a>
<a href="#" src="">马茶古道</a>
<a href="#" src="">西双版纳</a>
<a href="#" src="">泸沽湖</a>
<a href="#" src="">西双版纳</a>
<a href="#" src="">马茶古道</a>
<a href="#" src="">丽江</a>
<a href="#" src="">轿子雪山</a>
<a href="#" src="">御龙湾</a>
<a href="#" src="">普者黑</a>
<a href="#" src="">泸沽湖</a>
</nav>
<div>
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">
<img src="images/10.jpg">
<img src="images/11.jpg">
<img src="images/12.jpg">
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/javascript2.js"></script></body>
</body>
</html>$(document).ready(function () {
// 鼠标移上去后显示当前图片，其他图片透明隐藏
$("a").mouseenter(function () {
$("img").eq($(this).index()).css({'opacity':'1'}).siblings().css({'opacity':'0'});
});
// 键盘按下后切换图片
var index = 0;
$(document).keydown(function (event) {
if (event.keyCode == 37){
index = index>0 ? --index : $("a").length-1;
}else {
if (event.keyCode == 39){
index = index < $('a').length-1 ? ++index : 0;
}else {
return true;
}
$("img").eq(index).css({'opacity':'1'}).siblings().css({'opacity':'0'});
}
});
});*{
margin: 0;
padding: 0;
border: none;
}
html,body{
/*溢出的图片都隐藏*/
overflow: hidden;
height: 100%;
background: #93b3c6;
}
span{
/*让span为块级元素然后居中显示圆形*/
display: block;
height: 16px;
width: 16px;
margin: 30px auto 40px;
background: #fff;
border-radius: 50%;
}
nav{
position: relative;
display: flex;
width: 78.125vw;
margin: 0 auto 45px;
justify-content: space-between;
}
nav:before{
width: 100%;
height: 10px;
display: block;
position: absolute;
background: #fff;
top: 20px;
content: "";
}
nav>a{
position: relative;
font-size: 25px;
text-decoration: none;
background: #fff;
border: 2px solid #5395b4;
color: #255d7e;
padding: 10px;
}
div{
position: relative;
width: 78.125vw;
height: 75vh;
margin: 0 auto;
background: #fff;
overflow: hidden;
box-shadow: 0 0 30px 0 rgba(8,1,3,.3);
}
div>img{
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 98%;
height: 96%;
position: absolute;
margin: auto;
}0 -
好帮手慕夭夭
2019-09-23
你好同学，按左右键获取不到什么呢？因为没有全部的代码，老师这边看不到效果。请把全部代码都粘贴到问答区域，以便老师帮你准确高效的查看问题哦。
祝学习愉快！
0
相似问题