1，下载jquery.js文件，并且导入

2，在下面的img中写入可以用图片路径

 <!--

 第一个bug：

     刚打开页面时，按一下左键图片没切换，再按第二下时才切换图片。

 第二个bug：

     Ctrl+F5 刷新，按下右键之后出现的是丽江古城(第二张图片)，正确的应该是泸沽湖(第一张照片)

 第三个bug：

     Ctrl+F5 刷新，键盘左右箭头切换多次，轻轻移动鼠标会显示最后一张图片。

 -->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>云南旅游景点</title>

     <!-- <link rel="stylesheet" href="css/index.css"> -->

     <style>

         *{padding: 0;margin: 0;}

         body{background: rgba(0, 0, 255, .3);}

         .flag{display: block;width: 20px;height: 20px;margin: 30px auto 40px;background: #fff;border-radius: 50%;}

         .nav{display: flex;width: 80vw;margin: 0 auto 40px;justify-content: space-between;position: relative;}

         .nav > a{padding: 5px;border: 1px solid #000;font-size: 16px;color: #255d7e;text-decoration: none;background: #fff;z-index: 10;}

         .nav:before{display: block;width: 79vw;height: 13px;position: absolute;top: 10px;right: 2px;content: "";background: #fff;}

         .content{width: 80vw;height: 75vh;background: #fff;margin: auto;position: relative;}

         .content > img{width: 98%;height: 96%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}

     </style>

     <script type="text/javascript" src="js/jquery.js"></script>

 </head>

 <body>

     <span class="flag"></span>

     <nav class="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="content">

         <img src="data:images/1.jpg">

         <img src="data:images/2.jpg">

         <img src="data:images/3.jpg">

         <img src="data:images/4.jpg">

         <img src="data:images/5.jpg">

         <img src="data:images/6.jpg">

         <img src="data:images/7.jpg">

         <img src="data:images/8.jpg">

         <img src="data:images/9.jpg">

         <img src="data:images/10.jpg">

         <img src="data:images/11.jpg">

         <img src="data:images/12.jpg">

     </div>

     <script type="text/javascript">

         $(document).ready(function(){

             var index=0;//默认索引值

             //显示当前索引对应的图片，隐藏其他图片

             function switchPic(index){

                 $('img').eq(index).css({'opacity':'1'}).siblings().css({'opacity':'0'});

             }

             /*//添加下面代码块即可解决第一个和第二个bug

             //初始化图片显示第一张

             function init(){

                 index=0;

                 switchPic(index);

             }

             //初始化图片显示

             init();*/

            /* //添加下面代码块即可解决第三个bug

             //过滤掉document触发的mouseenter事件，

             //只有A标签触发的mouseenter事件才获得当前index

             function mouseEvent(event){

                 //如果是A标签触发的事件，那么就获得当前的索引index

                 if (event.currentTarget.nodeName=="A") {

                     index=$(this).index();

                     switchPic(index);

                 }else{

                     return true;//默认其他鼠标事件执行其他默认事件，不对index进行操作。

                 }

             }*/

             //鼠标事件

             function mouseEvent(event){

                 event.stopPropagation();//阻止事件冒泡和事件捕获

                 index=$(this).index();//获取当前对象的索引值

                 switchPic(index);

             }

             //键盘事件

             function keyEvent(event){

                 event.stopPropagation();//阻止事件冒泡和事件捕获

                 //37是键盘向左的键码，如果是按键盘左键

                 if (event.keyCode=='37') {

                     //如果索引值小于等于0，那么索引值就要变成最大:index=$('a').length-1

                     index<=0?index=$('a').length-1:index-=1;

                 //39是键盘向右的键码，如果是按键盘右键

                 }else if (event.keyCode=='39') {

                     //如果索引值大于等于最大的：$('a').length-1，那么index就要变成最小index=0;

                     index>=$('a').length-1?index=0:index+=1;

                 }else{

                     // 如果是按其他键，即什么都不做

                     return true;

                 }

                 switchPic(index);

             }

             //使用on进行事件绑定，document不是标签，而是一个文档对象，所以不用$+引号,而是$(document)

             //这里的事件绑定很特别，需要深入理解：$('a').add(document).on({...})

             $('a').add(document).on({

                 mouseenter:mouseEvent,

                 keydown:keyEvent

             })

         })

     </script>

 </body>

 </html>

 <!--

 第一个bug：

     刚打开页面时，按一下左键图片没切换，再按第二下时才切换图片。

     思路：

         1，说明问题出在左按键的代码块中

         2，按第二下才切换图片，说明index有问题

         综上所述：可以在做按键的代码块中输出index值的变化。

         代码index问题冲突：

         1，初始化 var index=0;

         2，在html中，默认前面的内容会被后面的内容覆盖。

            同样的，一组图片被进行绝对定位，那么后面的图片会覆盖前面的图片，所以这里显示的是最后一张图片。

         3，所以我们自定index值，和实际上显示图片的index值不一致，所以这里我们需要改成一致的。这就是解决思路：

         解决办法：就是把定义index的值 和 页面加载时显示的index 相等即可。

         1，既然设置了初始index=0，那就让图片也显示第一张，其他全部隐藏。

         2，初始化图片显示第一张

             function init(){

                 index=0;

                 switchPic(index);

             }

             //初始化图片显示

             init();

         3，另一种方法就是把，index=$('a').length-1。

 第二个bug：

     Ctrl+F5 刷新，按下右键之后出现的是丽江古城(第二张图片)，正确的应该是泸沽湖(第一张照片)

     思路：

         1，按下右键按钮，跳过第一张图片，直接显示第二张图片，说明问题出在右键代码块中，且index有问题。

         2，这bug，也是由于初始化时，index=0,而实际图片显示的index=$('a').length-1，引起的。

         所以，第一个bug解决了，第二个bug也就随之解决了。

 第三个bug：

     1，Ctrl+F5 刷新，键盘左右箭头切换多次，轻轻移动鼠标会显示最后一张图片。

     2，Ctrl+F5 刷星，图片切换到非最后一张，鼠标移出document文档，再进来，图片立马切换最后一张。

     思路：

         1，问题出在，鼠标轻轻移动就显示最后一张图片，说明问题出在鼠标移动事件中，可以输出看看具体什么事件。

     解决办法：

         1，console.log(event); 在鼠标事件代码块中输出具体执行了鼠标的什么事件。 ，返回的是mouseenter事件

         2，显示：k.Event {originalEvent: MouseEvent, type: "mouseenter", isDefaultPrevented: ƒ, target: html,

                 currentTarget: document, …}

         3， originalEvent:MouseEvent /ə'rɪdʒənl/ 原型事件：鼠标事件

             type:"mouseenter"   事件类型

             target: html   事件绑定的对象是：html

             currentTarget: document   触发事件发生的对象：document

         4，经输出，都是鼠标触发了mouseenter事件才进行显示最后一张图片的，所以只要找到该事件，并且过滤掉即可解决。

         5，修改鼠标事件函数

             function mouseEvent(event){

                 console.log(event.currentTarget);//返回：document对象

                 console.log(event.currentTarget.nodeName);//获取该对象的节点名称

                 //使用节点名称判断，如果是A标签，就进行Index操作，否则就不进行任何操作。

                 //即：在document触发mouseenter事件时，就不进行index变化，过滤掉即可。

                 if (event.currentTarget.nodeName=="A") {

                     index=$(this).index();//获取当前对象的索引值

                     switchPic(index);

                 }else{

                     return true;//返回：true表示其他按键执行默认事件

                 }

             }

 -->

img图片：

轮播图的3个常见bug，即处理bug思路及其解决办法的更多相关文章

  1. 原生JS的轮播图

    学习前端也有一小段时间了,当初在学习javascript的时候,练手的一个轮播图实例,轮播图也是挺常见的了. 着是通过获取图片偏移量实现的.也实现了无缝切换.还有一点问题就是没有加上图片切换的时候的延 ...

  2. 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

    引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...

  3. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  4. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  5. web常见效果之轮播图

    轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  6. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  7. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  8. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  9. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

随机推荐

  1. Feign【开启GIZP压缩】

    SpringCloudFeign支持对请求和响应进行gzip压缩,以此来提高通信效率. 1.搭建gzip-demo工程 1.1.工程依赖: <parent> <groupId> ...

  2. linux破解navicat for mysql

    第一次执行start_navicat时,会在用户主目录下生成一个名为.navicat64的隐藏文件夹. cd ~/.navicat64 此文件夹下有一个system.reg文件 rm system.r ...

  3. Vue基础知识学习（后端）

    ### Vue学习(后端) Vue安装 -引入文件安装,直接在官网下载vue.js引入项目中 -直接引用CDN -NPM安装(构建大型应用使用,在这不用) -命令行工具(构建大型单页应用,在这不用) ...

  4. ORACLE 的前后台进程

    关于oracle用户进程,服务进程,后台进程 用户进程(User Process) 是一个需要与Oracle Server交互的程序 运行于客户端 当用户运行某个工具或应用程序(如SQL*Plus)时 ...

  5. Docker系列5--一些问题及解决

    1. 存储问题 1.1 挂载目录权限问题 在使用swarm创建服务的时候要挂载存储来获取运行文件,及写日志出去. 可运行文件相当于在集群中所有地方应该都能访问到,所以使用了NFS文件系统,在集群中所有 ...

  6. Centos7.5 安装JDK1.8 步骤

    1.下载JDK安装包 先下载好JDK1.8 的安装包,下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downlo ...

  7. 使用IP代理初体验

    在很多时候我们需要用到IP代理,比如爬虫.投票等 封IP是一种很常用的办法,所谓道高一尺.魔高一丈,IP代理应运而生 最简单的一段代码 static void Main(string[] args) ...

  8. JS OOP -04 JS中的公有成员,私有成员和静态成员

    JS中的公有成员,私有成员和静态成员 a.实现类的公有成员 b.实现类的私有成员 c.实现类的静态成员 a.实现类的公有成员 之前定义的任何类型成员都属于公有成员的范畴,该类的任何实例都对外公开这些属 ...

  9. .net Core如何对静态文件的访问进行鉴权操作？

    之前给公司开发了一个文件管理服务,最基本的功能就是文件的上传下载,以及更新删除.预览:负责公司各个子系统的相关附件的管理,所有的接口都通过AOP来进行身份拦截认证了,但是在进行预览的时候,因为采用的是 ...

  10. SourceTree撤销commit

    参考链接:http://blog.csdn.net/gang544043963/article/details/71511958 重点是:选中提交之前的版本,再进行撤销回退