![]()
![]()
![]()
![]()
![]()
![]()
1 键盘事件keydown进行事件绑定，想要正常运行网页，
2 需要把下面所有的img的路径可以正常显示图片即可
3 keyCode 搜狗：keydown keycode
4
5 <!--
6 第一个bug：
7 刚打开页面时，按一下左键图片没切换，再按第二下时才切换图片。
8 第二个bug：
9 Ctrl+F5 刷新，按下右键之后出现的是丽江古城(第二张图片)，正确的应该是泸沽湖(第一张照片)
10 第三个bug：
11 Ctrl+F5 刷新，键盘左右箭头切换多次，轻轻移动鼠标会显示最后一张图片。
12 -->
13 <!DOCTYPE html>
14 <html lang="en">
15 <head>
16 <meta charset="UTF-8">
17 <title>云南旅游景点</title>
18 <!-- <link rel="stylesheet" href="css/index.css"> -->
19 <style>
20 *{padding: 0;margin: 0;}
21 body{background: rgba(0, 0, 255, .3);}
22 .flag{display: block;width: 20px;height: 20px;margin: 30px auto 40px;background: #fff;border-radius: 50%;}
23 .nav{display: flex;width: 80vw;margin: 0 auto 40px;justify-content: space-between;position: relative;}
24 .nav > a{padding: 5px;border: 1px solid #000;font-size: 16px;color: #255d7e;text-decoration: none;background: #fff;z-index: 10;}
25 .nav:before{display: block;width: 79vw;height: 13px;position: absolute;top: 10px;right: 2px;content: "";background: #fff;}
26 .content{width: 80vw;height: 75vh;background: #fff;margin: auto;position: relative;}
27 .content > img{width: 98%;height: 96%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
28 </style>
29 <script type="text/javascript" src="js/jquery.js"></script>
30 </head>
31 <body>
32 <span class="flag"></span>
33 <nav class="nav">
34 <a href="#">泸沽湖</a>
35 <a href="#">丽江古城</a>
36 <a href="#">就这家-云逸客栈</a>
37 <a href="#">西双版纳</a>
38 <a href="#">云南红酒庄</a>
39 <a href="#">轿子雪山</a>
40 <a href="#">普者黑</a>
41 <a href="#">海埂大坝</a>
42 <a href="#">玉龙湾</a>
43 <a href="#">昆明郊野公园</a>
44 <a href="#">欧洲风琴小镇</a>
45 <a href="#">茶马古道</a>
46 </nav>
47 <div class="content">
48 <img src="images/1.jpg">
49 <img src="images/2.jpg">
50 <img src="images/3.jpg">
51 <img src="images/4.jpg">
52 <img src="images/5.jpg">
53 <img src="images/6.jpg">
54 <img src="images/7.jpg">
55 <img src="images/8.jpg">
56 <img src="images/9.jpg">
57 <img src="images/10.jpg">
58 <img src="images/11.jpg">
59 <img src="images/12.jpg">
60 </div>
61 <script type="text/javascript">
62 $(document).ready(function(){
63 var index=0;//默认索引值
64 //显示当前索引对应的图片，隐藏其他图片
65 function switchPic(index){
66 //注意注意：：：下面的动画方法全部都是一个执行过程，该函数已经绑定到所有a标签上的mouseenter事件上面了
67 //使用自定义动画： animate({'属性名':'属性值','属性名':'属性值','属性名':'属性值'...})
68 //防止多次动画排列等待，必须在执行动画之前停止strop()所有动画，然后在执行animate()动画
69 /* $('img').eq(index).stop().animate({'opacity':'1'}).siblings().stop().animate({'opacity':'0'});
70 $('img').eq(index).stop()//index对应的img图片下拉动画展现
71 .animate({'opacity':'1',width:'98%'},600)
72 .siblings().stop()//所有动画执行前都要使用停止，防止多个动画排列等候异常
73 .animate({'opacity':'0',width:'0%'},100);//其兄弟元素上拉收起来
74
75 //使用 show(time,fn)显示 hide(time,fn)隐藏
76 $('img').eq(index).stop()//所有动画执行前都要使用停止，防止多个动画排列等候异常
77 .show('slow')//index对应的img图片下拉动画展现
78 .siblings().stop()//
79 .hide('slow');
80 //toggle(time,fn),用于控制一个元素的显示隐藏，不能控制多个对象 等价于 show() 和 hide()的组合
81 $('.content').stop()//所有动画执行前都要使用停止，防止多个动画排列等候异常
82 .toggle('slow')//index对应的img图片下拉动画展现
83
84 //fadeIn(time,fn) 淡入显示 fadeOut(time,fn)淡出消失
85 $('img').eq(index).stop()//所有动画执行前都要使用停止，防止多个动画排列等候异常
86 .fadeIn('slow')//index对应的img图片下拉动画展现
87 .siblings().stop()//
88 .fadeOut('slow');//其兄弟元素上拉收起来
89 //fadeToggle(time,fn) 只控制一个元素，不能控制两个元素，淡入淡出 等价于 fadeIn() 和 fadeOut()的组合
90 $('.content').stop()//所有动画执行前都要使用停止，防止多个动画排列等候异常
91 .fadeToggle('slow');//index对应的img图片下拉动画展现
92
93 //使用 slideDown(time,fn)下拉展现 slideUp(time,fn)上拉收起来
94 $('img').eq(index).stop()//所有动画执行前都要使用停止，防止多个动画排列等候异常
95 .slideDown('slow')//index对应的img图片下拉动画展现
96 .siblings().stop()//
97 .slideUp('slow');//其兄弟元素上拉收起来 */
98 //使用 slideToggle(time,fn) 只控制一个元素，不能控制两个元素 等价于 slideUp() 和 slideDown()的组合
99 $('.content').stop()//所有动画执行前都要使用停止，防止多个动画排列等候异常
100 .slideToggle('slow')//index对应的img图片下拉动画展现
101 }
102
103 /*//添加下面代码块即可解决第一个和第二个bug
104 //初始化图片显示第一张
105 function init(){
106 index=0;
107 switchPic(index);
108 }
109 //初始化图片显示
110 init();*/
111
112 /* //注释下面的mouseEvent(event)方法，再添加下面代码块即可解决第三个bug
113 //过滤掉document触发的mouseenter事件，
114 //只有A标签触发的mouseenter事件才获得当前index
115 function mouseEvent(event){
116 //如果是A标签触发的事件，那么就获得当前的索引index
117 if (event.currentTarget.nodeName=="A") {
118 index=$(this).index();
119 switchPic(index);
120 }else{
121 return true;//默认其他鼠标事件执行其他默认事件，不对index进行操作。
122 }
123 }*/
124
125 //鼠标事件
126 function mouseEvent(event){
127 event.stopPropagation();//阻止事件冒泡和事件捕获
128 index=$(this).index();//获取当前对象的索引值
129 switchPic(index);
130 }
131 //键盘事件
132 function keyEvent(event){
133 event.stopPropagation();//阻止事件冒泡和事件捕获
134 //37是键盘向左的键码，如果是按键盘左键
135 if (event.keyCode=='37') {
136 //如果索引值小于等于0，那么索引值就要变成最大:index=$('a').length-1
137 index<=0?index=$('a').length-1:index-=1;
138 //39是键盘向右的键码，如果是按键盘右键
139 }else if (event.keyCode=='39') {
140 //如果索引值大于等于最大的：$('a').length-1，那么index就要变成最小index=0;
141 index>=$('a').length-1?index=0:index+=1;
142 }else{
143 // 如果是按其他键，即什么都不做
144 return true;
145 }
146 switchPic(index);
147 }
148 //使用on进行事件绑定，document不是标签，而是一个文档对象，所以不用$+引号,而是$(document)
149 //这里的事件绑定很特别，需要深入理解：$('a').add(document).on({...})
150 $('a').add(document).on({
151 mouseenter:mouseEvent,
152 keydown:keyEvent
153 })
154 })
155 </script>
156 </body>
157 </html>
158
159 <!--
160 setInterval(fn,time) 和 setTimeout(fn,time)
161 <script type="text/javascript" src="js/jquery.js"></script>
162 <script>
163 $(document).ready(function(){
164 var timer=null;
165 var i=0;
166 /*function result(){
167 i+=1;
168 $('.time').text(i);
169 setTimeout(result,1000);
170 }
171 result();*/
172 var timer=setInterval(function(){
173 i+=1;
174 $('.time').text(i);
175 },1000);
176 $(document).on('click','input',function(){
177 clearInterval(timer);
178 })
179 })
180 </script>
181 </head>
182 <body>
183 <span class="time"></span>
184 <input type="button" value="停止">
185 </body> -->
186
187 <!--
188 第一个bug：
189 刚打开页面时，按一下左键图片没切换，再按第二下时才切换图片。
190 思路：
191 1，说明问题出在左按键的代码块中
192 2，按第二下才切换图片，说明index有问题
193 综上所述：可以在做按键的代码块中输出index值的变化。
194 代码index问题冲突：
195 1，初始化 var index=0;
196 2，在html中，默认前面的内容会被后面的内容覆盖。
197 同样的，一组图片被进行绝对定位，那么后面的图片会覆盖前面的图片，所以这里显示的是最后一张图片。
198 3，所以我们自定index值，和实际上显示图片的index值不一致，所以这里我们需要改成一致的。这就是解决思路：
199 解决办法：就是把定义index的值 和 页面加载时显示的index 相等即可。
200 1，既然设置了初始index=0，那就让图片也显示第一张，其他全部隐藏。
201 2，初始化图片显示第一张
202 function init(){
203 index=0;
204 switchPic(index);
205 }
206 //初始化图片显示
207 init();
208 3，另一种方法就是把，index=$('a').length-1。
209
210 第二个bug：
211 Ctrl+F5 刷新，按下右键之后出现的是丽江古城(第二张图片)，正确的应该是泸沽湖(第一张照片)
212 思路：
213 1，按下右键按钮，跳过第一张图片，直接显示第二张图片，说明问题出在右键代码块中，且index有问题。
214 2，这bug，也是由于初始化时，index=0,而实际图片显示的index=$('a').length-1，引起的。
215 所以，第一个bug解决了，第二个bug也就随之解决了。
216 第三个bug：
217 1，Ctrl+F5 刷新，键盘左右箭头切换多次，轻轻移动鼠标会显示最后一张图片。
218 2，Ctrl+F5 刷星，图片切换到非最后一张，鼠标移出document文档，再进来，图片立马切换最后一张。
219 思路：
220 1，问题出在，鼠标轻轻移动就显示最后一张图片，说明问题出在鼠标移动事件中，可以输出看看具体什么事件。
221 解决办法：
222 1，console.log(event); 在鼠标事件代码块中输出具体执行了鼠标的什么事件。 ，返回的是mouseenter事件
223 2，显示：k.Event {originalEvent: MouseEvent, type: "mouseenter", isDefaultPrevented: ƒ, target: html,
224 currentTarget: document, …}
225 3， originalEvent:MouseEvent /ə'rɪdʒənl/ 原型事件：鼠标事件
226 type:"mouseenter" 事件类型
227 target: html 事件绑定的对象是：html
228 currentTarget: document 触发事件发生的对象：document
229 4，经输出，都是鼠标触发了mouseenter事件才进行显示最后一张图片的，所以只要找到该事件，并且过滤掉即可解决。
230 5，修改鼠标事件函数
231 function mouseEvent(event){
232 console.log(event.currentTarget);//返回：document对象
233 console.log(event.currentTarget.nodeName);//获取该对象的节点名称
234 //使用节点名称判断，如果是A标签，就进行Index操作，否则就不进行任何操作。
235 //即：在document触发mouseenter事件时，就不进行index变化，过滤掉即可。
236 if (event.currentTarget.nodeName=="A") {
237 index=$(this).index();//获取当前对象的索引值
238 switchPic(index);
239 }else{
240 return true;//返回：true表示其他按键执行默认事件
241 }
242 }
243 -->
浙公网安备 33010602011771号