1,下载jquery.js文件,并且导入
2,在下面的img中写入可以用图片路径
1 <!-- 2 第一个bug: 3 刚打开页面时,按一下左键图片没切换,再按第二下时才切换图片。 4 第二个bug: 5 Ctrl+F5 刷新,按下右键之后出现的是丽江古城(第二张图片),正确的应该是泸沽湖(第一张照片) 6 第三个bug: 7 Ctrl+F5 刷新,键盘左右箭头切换多次,轻轻移动鼠标会显示最后一张图片。 8 --> 9 <!DOCTYPE html> 10 <html lang="en"> 11 <head> 12 <meta charset="UTF-8"> 13 <title>云南旅游景点</title> 14 <!-- <link rel="stylesheet" href="css/index.css"> --> 15 <style> 16 *{padding: 0;margin: 0;} 17 body{background: rgba(0, 0, 255, .3);} 18 .flag{display: block;width: 20px;height: 20px;margin: 30px auto 40px;background: #fff;border-radius: 50%;} 19 .nav{display: flex;width: 80vw;margin: 0 auto 40px;justify-content: space-between;position: relative;} 20 .nav > a{padding: 5px;border: 1px solid #000;font-size: 16px;color: #255d7e;text-decoration: none;background: #fff;z-index: 10;} 21 .nav:before{display: block;width: 79vw;height: 13px;position: absolute;top: 10px;right: 2px;content: "";background: #fff;} 22 .content{width: 80vw;height: 75vh;background: #fff;margin: auto;position: relative;} 23 .content > img{width: 98%;height: 96%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} 24 </style> 25 <script type="text/javascript" src="js/jquery.js"></script> 26 </head> 27 <body> 28 <span class="flag"></span> 29 <nav class="nav"> 30 <a href="#">泸沽湖</a> 31 <a href="#">丽江古城</a> 32 <a href="#">就这家-云逸客栈</a> 33 <a href="#">西双版纳</a> 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 </nav> 43 <div class="content"> 44 <img src="images/1.jpg"> 45 <img src="images/2.jpg"> 46 <img src="images/3.jpg"> 47 <img src="images/4.jpg"> 48 <img src="images/5.jpg"> 49 <img src="images/6.jpg"> 50 <img src="images/7.jpg"> 51 <img src="images/8.jpg"> 52 <img src="images/9.jpg"> 53 <img src="images/10.jpg"> 54 <img src="images/11.jpg"> 55 <img src="images/12.jpg"> 56 </div> 57 <script type="text/javascript"> 58 $(document).ready(function(){ 59 var index=0;//默认索引值 60 //显示当前索引对应的图片,隐藏其他图片 61 function switchPic(index){ 62 $('img').eq(index).css({'opacity':'1'}).siblings().css({'opacity':'0'}); 63 } 64 65 /*//添加下面代码块即可解决第一个和第二个bug 66 //初始化图片显示第一张 67 function init(){ 68 index=0; 69 switchPic(index); 70 } 71 //初始化图片显示 72 init();*/ 73 74 /* //添加下面代码块即可解决第三个bug 75 //过滤掉document触发的mouseenter事件, 76 //只有A标签触发的mouseenter事件才获得当前index 77 function mouseEvent(event){ 78 //如果是A标签触发的事件,那么就获得当前的索引index 79 if (event.currentTarget.nodeName=="A") { 80 index=$(this).index(); 81 switchPic(index); 82 }else{ 83 return true;//默认其他鼠标事件执行其他默认事件,不对index进行操作。 84 } 85 }*/ 86 87 //鼠标事件 88 function mouseEvent(event){ 89 event.stopPropagation();//阻止事件冒泡和事件捕获 90 index=$(this).index();//获取当前对象的索引值 91 switchPic(index); 92 } 93 //键盘事件 94 function keyEvent(event){ 95 event.stopPropagation();//阻止事件冒泡和事件捕获 96 //37是键盘向左的键码,如果是按键盘左键 97 if (event.keyCode=='37') { 98 //如果索引值小于等于0,那么索引值就要变成最大:index=$('a').length-1 99 index<=0?index=$('a').length-1:index-=1; 100 //39是键盘向右的键码,如果是按键盘右键 101 }else if (event.keyCode=='39') { 102 //如果索引值大于等于最大的:$('a').length-1,那么index就要变成最小index=0; 103 index>=$('a').length-1?index=0:index+=1; 104 }else{ 105 // 如果是按其他键,即什么都不做 106 return true; 107 } 108 switchPic(index); 109 } 110 //使用on进行事件绑定,document不是标签,而是一个文档对象,所以不用$+引号,而是$(document) 111 //这里的事件绑定很特别,需要深入理解:$('a').add(document).on({...}) 112 $('a').add(document).on({ 113 mouseenter:mouseEvent, 114 keydown:keyEvent 115 }) 116 }) 117 </script> 118 </body> 119 </html> 120 121 <!-- 122 第一个bug: 123 刚打开页面时,按一下左键图片没切换,再按第二下时才切换图片。 124 思路: 125 1,说明问题出在左按键的代码块中 126 2,按第二下才切换图片,说明index有问题 127 综上所述:可以在做按键的代码块中输出index值的变化。 128 代码index问题冲突: 129 1,初始化 var index=0; 130 2,在html中,默认前面的内容会被后面的内容覆盖。 131 同样的,一组图片被进行绝对定位,那么后面的图片会覆盖前面的图片,所以这里显示的是最后一张图片。 132 3,所以我们自定index值,和实际上显示图片的index值不一致,所以这里我们需要改成一致的。这就是解决思路: 133 解决办法:就是把定义index的值 和 页面加载时显示的index 相等即可。 134 1,既然设置了初始index=0,那就让图片也显示第一张,其他全部隐藏。 135 2,初始化图片显示第一张 136 function init(){ 137 index=0; 138 switchPic(index); 139 } 140 //初始化图片显示 141 init(); 142 3,另一种方法就是把,index=$('a').length-1。 143 144 第二个bug: 145 Ctrl+F5 刷新,按下右键之后出现的是丽江古城(第二张图片),正确的应该是泸沽湖(第一张照片) 146 思路: 147 1,按下右键按钮,跳过第一张图片,直接显示第二张图片,说明问题出在右键代码块中,且index有问题。 148 2,这bug,也是由于初始化时,index=0,而实际图片显示的index=$('a').length-1,引起的。 149 所以,第一个bug解决了,第二个bug也就随之解决了。 150 第三个bug: 151 1,Ctrl+F5 刷新,键盘左右箭头切换多次,轻轻移动鼠标会显示最后一张图片。 152 2,Ctrl+F5 刷星,图片切换到非最后一张,鼠标移出document文档,再进来,图片立马切换最后一张。 153 思路: 154 1,问题出在,鼠标轻轻移动就显示最后一张图片,说明问题出在鼠标移动事件中,可以输出看看具体什么事件。 155 解决办法: 156 1,console.log(event); 在鼠标事件代码块中输出具体执行了鼠标的什么事件。 ,返回的是mouseenter事件 157 2,显示:k.Event {originalEvent: MouseEvent, type: "mouseenter", isDefaultPrevented: ƒ, target: html, 158 currentTarget: document, …} 159 3, originalEvent:MouseEvent /ə'rɪdʒənl/ 原型事件:鼠标事件 160 type:"mouseenter" 事件类型 161 target: html 事件绑定的对象是:html 162 currentTarget: document 触发事件发生的对象:document 163 4,经输出,都是鼠标触发了mouseenter事件才进行显示最后一张图片的,所以只要找到该事件,并且过滤掉即可解决。 164 5,修改鼠标事件函数 165 function mouseEvent(event){ 166 console.log(event.currentTarget);//返回:document对象 167 console.log(event.currentTarget.nodeName);//获取该对象的节点名称 168 //使用节点名称判断,如果是A标签,就进行Index操作,否则就不进行任何操作。 169 //即:在document触发mouseenter事件时,就不进行index变化,过滤掉即可。 170 if (event.currentTarget.nodeName=="A") { 171 index=$(this).index();//获取当前对象的索引值 172 switchPic(index); 173 }else{ 174 return true;//返回:true表示其他按键执行默认事件 175 } 176 } 177 -->
img图片: