老师，这段代码刷新后按右箭头，返回到的是第二张图片而不是第一张，这是为什么
来源：5-1 事件参数
慕田峪9451496
2020-03-25 11:03:52
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery入门自制</title>
<link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<span></span>
<nav>
<a href="#">泸沽湖</a>
<a href="#">丽江古城</a>
<a href="#">茶马古道</a>
<a href="#">就这家·云逸客栈</a>
<a href="#">西双版纳</a>
<a href="#">云南红酒庄</a>
<a href="#">轿子雪山</a>
<a href="#">普者黑</a>
<a href="#">海埂大坝</a>
<a href="#">玉龙湾</a>
<a href="#">昆明郊野公园</a>
<a href="#">欧洲风琴小镇</a>
</nav>
<div class="imgs">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
<img src="images/7.jpg" alt="">
<img src="images/8.jpg" alt="">
<img src="images/9.jpg" alt="">
<img src="images/10.jpg" alt="">
<img src="images/11.jpg" alt="">
<img src="images/12.jpg" alt="">
</div>
<script src="JS/jquery.js"></script>
<script src="JS/index.js"></script>
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
}
body{
background-color: rgb(104, 206, 206);
width: 100%;
overflow: hidden;
}
span{
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 30px auto 45px;
background-color: #fff;
}
nav{
display: flex;
width: 78.125vw;
margin:0 auto 30px;
justify-content: space-between;
position: relative;
}
nav:before{
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #fff;
position: absolute;
top: 15px;
right: 0.1px;
}
a{
position: relative;
text-decoration: none;
color: black;
/* height: 20px; */
background-color: white;
padding:10px;
font-size: 13px;
}
div.imgs{
position: relative;
overflow: hidden;
width: 78.125vw;
height: 70vh;
margin: 0 auto;
background-color: #fff;
box-shadow: 1px 1px 1px rgba(80, 78, 76, 0.3);
}
div>img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 98%;
height: 96%;
margin: auto;
}
js代码
$(document).ready(function(){
var index = 0;
$('a').click(function(){
index = $((this).index);
swiper();
})
$(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: index=0;
}
swiper();
})
var swiper =function(){
$('img')
.eq(index)
.css({'opacity':'1'})
.siblings().
css({'opacity':'0'})
$('a').eq(index)
.css({'background-color':'orange'})
.siblings().css({'background-color':'#fff'})
}
})
1回答
-
同学你好，打开页面时，显示的图片是最后一张，定义index时赋值的是0，在按右箭头时，index自增，也就是1，就跳过索引为0的图片，直接显示索引为1的图片。建议：可以先调用下swiper，默认显示索引为0的图片。如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 3
回答 2