为什么右键可以切换，左键一直不可以
来源：5-1 事件参数
TeresaL
2019-04-02 12:01:58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="main">
<!--头部-->
<div class="header">
<nav>pwa</nav>
<nav>node</nav>
<nav>vue</nav>
<nav>小程序</nav>
</div>
<!--图片区域-->
<div class="content">
<img class="img1" src="img/1.jpg">
<img class="img2" src="img/3.jpg">
<img class="img3" src="img/4.jpg">
<img class="img4" src="img/5.jpg">
</div>
</div>
</body>
</html>
css：
*{
padding: 0;
margin: 0;
border: none;
}
.main{
width:1000px;
height:600px;
margin: 0 auto;
overflow: hidden;
}
.header{
width:1000px;
height: 100px;
}
nav{
width:25%;
height: 100px;
line-height: 100px;
float: left;
background-color: #000;
text-align: center;
color:#fff;
font-weight: bold;
cursor:pointer;
}
nav:hover{
background-color: #ddd;
color:#000;
}
.content img{
width:1000px;
height:500px;
}
.content{
position: relative;
}
.img1{
opacity: 1;
}
img{
position: absolute;
top:0;
left: 0;
opacity: 0;
}
jq：
$(document).ready(function(){
var index=0;
// $('nav').click(function(){
// $('img')
// .eq($(this).index())
// .css({'opacity':'1'})
// .siblings().css({'opacity':'0'});
// })
$('nav').mouseenter(function(){
index=$(this).index();//通过它改变index的值
swiper();
})
$(document).keydown(function(event){
if(event.keyCode==37){
index=index>0?--index:$('nav').length-1;
// if(index==0){
// index=$('nav').length-1;
// }else{
// index--;
// }
// swiper();
}else if(event.keyCode==39){
index=index<$('nav').length-1?++index:0;
}else{
return false;
}
// if(index==$('nav').length-1){
// index=0;
// }else{
// index++;
// }
// swiper();
// }
swiper();
});
var swiper=function(){
$('img').eq(index).css({'opacity':'1'}).siblings({'opacity':'0'});
}
})
1回答
-
同学你好！代码实现不了的问题是因为：
在siblings()里面只可以写选择器不可以写样式，只能在css里面写样式！
如果解决了你的疑惑，望采纳， 祝学习愉快~~
0
相似问题
回答 1
回答 1