关于案例的代码问题
来源：7-1 揭秘案例3个bug，并处理前两个bug
迷失的小麦
2020-01-14 15:49:31
为什么我看有的同学说改变index的css值也能实现效果？为什么？
代码报错，但是我找不到错误
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* { margin: 0; padding: 0; border: none; }
html,
body { overflow: hidden; height: 100%; background: #93b3c6; }
span { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background: #fff; }
nav { position: relative; display: flex; width: 78.125vw; margin: 0 auto 45px; justify-content: space-between; }
nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: ""; background: #fff; }
nav > a { font-size: 20px; position: relative; padding: 10px; text-decoration: none; color: #255d7e; border: 2px solid #5395b4; background: #fff; }
div { position: relative; overflow: hidden; width: 78.125vw; height: 75vh; margin: 0 auto; background: #fff; box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3); }
div > img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 98%; height: 96%; margin: auto; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
var index=$("a").length-1;
//var index=0;
/*一、刚打开页面时，按一下左键没有变化，按两下才能切换
二、ctrl+F5刷新页面
按下右键之后出现的是丽江古城的图片，正确的应该是泸沽湖的*/
var swiper=function (){
$("img").eq(index).css({"opacity":"1"}).siblings().css({"opacity":"0"});
};
//a元素不支持keydown事件，因为无法聚焦，一般可以触发keydown事件的元素有：document，body，window，input，textarea等
//给a和document元素都绑定了mouseenter事件,所以移入document的时候会触发，但是当你移入a的时候并不会再次触发document的移入事件
//当a标签和document元素都绑定了onkeydown事件， 如果不阻止事件冒泡， 那么触发a元素该事件的时候， 向上冒泡同时会触发他的先辈document的onkeydown事件， 两个都好执行。 所以需要添加stopPropgation阻止这种情况
$("a").add(document).on({
mouseenter:function (event){
event.stopPropagation();
index=$(this).index();
swiper();
},
keydown:function (event){
event.stopPropagation();
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 false;//阻止页面跳转
//event.preventDefault();//阻止页面跳转
return true;//页面正常跳转
}
swiper();
}
});
</script>
</head>
<body>
<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>
<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>
</body>
</html>写回答
1回答
-
同学你好，关于同学的问题解答如下：
1、先看同学代码中的bug，大致意思是结束符不对，这个时候同学就可以查看下自己的标签符号是否嵌套正确，有无遗漏的。查看得知：
加上就正确了。
2、再看为什么给第一张图片加层级样式就可以解决问题。因为我们的图片都是被定位到了同一个位置，是通过控制它们的显示隐藏实现的效果。当我们给第一张图片加了层级以后，第一张图片就被放在了所有的图片上面，当页面刚加载成功且我们未执行任何操作时（即只加载了样式和图片，并未执行鼠标移入操作时），第一张图片就会显示在最上方，也就是默认第一张的效果。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题