在做轮播模块的时候遇到问题是：你在 连续指示小按钮 时候再去 只有 点击 下一张按钮，出现bug: 指示小按钮的 className 当前显示的 calssName 为 undefined ！

// 分析：

// 因为我们不管怎样点击 指示按钮的时候 ，你在点击 下一张/上一张 按钮 都是按我们写好的逻辑给当前 index++/ index--

// 而这种情况只有出现 ：指示按钮 连续点击多次 再点击下一张按钮 才有问题 ，而点击上一张按钮 没有问题

调试情况：

//在查看chrome 的调试发现例如：我点击第三个指示按钮 连续多次 再点击下一张按钮   buttons[index - 1].className = 'on';  // index = 31  若是在js再执行 跟 index = //311   3111 31111 重复类似的报错。

//这种31 311 3111看上去就是 字符串的拼接 而不是 number 的加减 ,因此在会想到问题的所在 因为在你点击指示按钮并获取 指示按钮属性 getAttribute('data-slide') 的 储存的索引 且 把  index = myIndex 而导致出现 bug 。

原因： var myIndex = this.getAttribute('data-slide') ;

解决：var myIndex = parseInt(this.getAttribute('data-slide') );

总结：只要是关于到计算的 都必须进行类型转换 parseInt() | parseFloat() 保证 逻辑正确性

希望下次大家遇到我这样类似的 小 bug 能第一时间找到问题所在，我想大家没有我这么粗心，不过我还是用记录下来，希望能给你们 能避免我这样的问题！

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>焦点轮播图</title>

 <style>

#container {

    width: 600px;

    height: 400px;

    overflow: hidden;

    position: relative;

    box-sizing: border-box;

    border: 3px solid #333;

    margin: 100px auto

}

#container #list {

    width: 4206px;

    height: 400px;

    position: absolute;

    z-index: 1;

}

#container #list img {

    width: 600px;

    height: 100%;

    float: left;

}

#container #buttons {

    height: 10px;

    width: 100px;

    position: absolute;

    left: 250px;

    bottom: 20px;

    z-index: 2;

}

#container #buttons span {

    float: left;

    display: inline-block;

    height: 10px;

    width: 10px;

    border-radius: 5px;

    background: #666;

    cursor: pointer;

}

#container #buttons span:nth-child(1) {

    margin-left: 10px;

}

#container #buttons span + span {

    margin-left: 5px;

}

#container #buttons span.on {

    background: #fff;

}

#container #buttons span:hover {

    background: #eee;

}

#container .arrow {

    display: block;

    cursor: pointer;

    width: 50px;

    height: 50px;

    position: absolute;

    top: 50%;

    margin-top: -25px;

    opacity: 0;

    z-index: 2;

    transition:0.4s ease-in;

}

#container a.pre {

    left: 20px

}

#container a.next {

    right: 20px;

}

#container .pre::after,#container .next::after{

    content: '';

    position: absolute;

    width: 50px;

    height: 50px;

}

#container .pre::after{

    background: url("../images/arrow-left.png") no-repeat left top;

    background-size: 50px 50px;

}

#container .next::after{

    background: url("../images/arrow-right.png") no-repeat left top;

    background-size: 50px 50px;

}

#container .arrow:hover {

    background: rgba(0, 0, 0, 0.6);

}

#container:hover .arrow {

    opacity: 1;

    transition:0.4s linear;

}

</style>

</head>

<body>

<div id="container">

    <div id="list" style="left:-600px">

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

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

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

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

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

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

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

    </div>

    <div id="buttons">

        <span class="on" data-slide='1'></span>

        <span data-slide='2'></span>

        <span data-slide='3'></span>

        <span data-slide='4'></span>

        <span data-slide='5'></span>

    </div>

    <a href="javascript:;" class="arrow pre" id="pre"></a>

    <a href="javascript:;" class="arrow next" id="next"></a>

</div>

<script>

</script>

</body>

</html>

js代码：

window.onload = function () {

    var container = document.getElementById('container');

    var buttons = document.getElementById('buttons').getElementsByTagName('SPAN');

    var list = document.getElementById('list');

    var pre = document.getElementById('pre');

    var next = document.getElementById('next');

    var index = 1;

//        动画函数  判断是否在动画

    var animated = false;

    // 自动切换

    var timer;

    function play(){

        timer = setInterval(function () {

            next.onclick()

        },2000)

    }

    function stop() {

        clearInterval(timer)

    }

    container.onmouseover = stop;

    container.onmouseout = play;

    play();

//         按钮点击事件

    for (var i = 0; i < buttons.length; i++) {

        buttons[i].onclick = function () {

            if (this.className == 'on') {

                return;

            }

            var myIndex = parseInt(this.getAttribute('data-slide'));

            var offset = -600 * parseInt((myIndex - index));

            animate(offset);

            index = myIndex;

            showButton();

        }

    }

//选中按钮的样式

    function showButton() {

        for (var i = 0; i < buttons.length; i++) {

            if (buttons[i].className == 'on') {

                buttons[i].className = '';

                break;

            }

        }

        buttons[index - 1].className = 'on';

    }

    function animate(offset) {

        var newLeft = parseInt(list.style.left) + offset;

        //        动画函数

        var times =300; //位移总的时间

        var interval = 10;// 位移间隔

        var speed = offset / (times / interval);//每次的位移量

        function go() {

            animated = true;

            if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)) {

                list.style.left = parseInt(list.style.left) + speed + 'px';

                setTimeout(go,interval);

            }else{

                animated = false;

                list.style.left = newLeft + 'px';

                if (newLeft < -3000) {

                    list.style.left = -600 + 'px';

                }

                if (newLeft > -600) {

                    list.style.left = -3000 + 'px';

                }

            }

        }

        go();

    }

    /* 下一张 -600 */

    next.onclick = function () {

        if (index == 5) {

            index = 1

        } else {

            index += 1;

        }

        //debugger

        showButton();

        // 还没有完动画 则不滑动

        if(!animated){

            animate(-600)

        }

    };

    /* 上一张 +600 */

    pre.onclick = function () {

        if (index == 1) {

            index = 5

        } else {

            index -= 1;

        }

        showButton();

        if(!animated){

            animate(600)

        }

    };

};

用 parseInt()解决的 小 bug的更多相关文章

  1. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  2. 解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug

    前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描 ...

  3. 花了5天时间，终于解决了一个bug，心情非常愉快，憋了这么久，不吐不快

    http://www.cnweblog.com/fly2700/archive/2011/12/06/318916.html (转载) 花了5天时间,终于解决了一个bug,心情非常愉快,憋了这么久,不 ...

  4. Flutter实战视频-移动电商-34.列表页_小BUG的修复

    34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...

  5. 观CSDN站点小Bug有感

            今天早上在浏览博客的时候偶然发现CSDN博客的数据出现了异常,我也是头一次看到这么明显的Bug.详细什么表现呢?先来看个截图.例如以下:             常常看CSDN博客的人 ...

  6. js动画--一个小bug处理下

    对于上面的课程我们很好的处理了一个小bug,那么我们现在讲程序进行优化一下,前一节的程序中,我们处理处理的属性都是写死了的.为了我们能够很好的对某个属性进行操作的话.我们这样来设置. js文件 win ...

  7. 小BUG大原理：重写WebMvcConfigurationSupport后SpringBoot自动配置失效

    一.背景 公司的项目前段时间发版上线后,测试反馈用户的批量删除功能报错.正常情况下看起来应该是个小 BUG,可怪就怪在上个版本正常,且此次发版未涉及用户功能的改动.因为这个看似小 BUG 我了解到不少 ...

  8. 小BUG大原理 | 第一篇：重写WebMvcConfigurationSupport后SpringBoot自动配置失效

    一.背景 公司的项目前段时间发版上线后,测试反馈用户的批量删除功能报错.正常情况下看起来应该是个小BUG,可怪就怪在上个版本正常,且此次发版未涉及用户功能的改动.因为这个看似小BUG我了解到不少未知的 ...

  9. （原创）WinForm中莫名其妙的小BUG——ComboBox 尺寸高度问题

    一.前言 使用WinForm很久了,多多少少遇到一些小BUG. 这些小BUG影响并不严重,而且只要稍微设置一下就能正常使用,所以微软也一直没有修复这些小BUG. 本来并不足以写篇文章去记录,但是昨天遇 ...

随机推荐

  1. Spring框架(4)---AOP讲解铺垫

    AOP讲解铺垫      不得不说,刚开始去理解这个Aop是有点难理解的,主要还是新的概念比较多,对于初学者一下子不一定马上能够快速吸收,所以我先对什么事Aop做一个解释: 首先说明:本文不是自己所写 ...

  2. vs2017 .net core WebApp 去掉ApplicationInsights

    vs2017新建的 .net core WebApp都内置了这个遥测中间件进去,嗯,用AZURE的话是不错能无缝支持.但不用AZURE就没什么用了. 为了不占地方和提高一点点初始启动的速度,对新建的项 ...

  3. Web平台安装及检测程序

    软件名称:microsoft web platform installer 上图: 可以看做是一个App Store, 你再也不用东奔西跑去找什么开发软件,CMS等等了,直接打开这个,勾选上就安装吧, ...

  4. 3212: Pku3468 A Simple Problem with Integers

    3212: Pku3468 A Simple Problem with Integers Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 1053  So ...

  5. Markdown语法讲解及MWeb使用教程

    写了一个月的博客,忽然感觉Markdown编辑器比较好用,于是就下载了一个本地的Markdown编辑软件学习了一下,刚好软件里自带了一篇英文的指示文档,顺便翻译了一下,通过这个过程也大致熟悉了Mark ...

  6. 机器学习基石 1 The Learning Problem

    机器学习基石 1 The Learning Problem Introduction 什么是机器学习 机器学习是计算机通过数据和计算获得一定技巧的过程. 为什么需要机器学习 1 人无法获取数据或者数据 ...

  7. centos7 docker安装详解

    查看内核和操作系统版本[root@prod3 ~]# uname -r3.10.0-327.el7.x86_64[root@prod3 ~]# cat /etc/redhat-release Cent ...

  8. volatile关键字和synchronized关键字

    volatile关键字: 可以用来修饰字段(成员变量),就是告知程序任何对该变量的访问均需要从共享内存中获取,而对它的改变必须同步刷新回共享内存,它能保证所有线程对变量访问的可见性. synchron ...

  9. iOS开发RunLoop

    最近处于离职状态,时间也多了起来,但是学习还是不能放松,今天总结一下RunLoop,RunLoop属于iOS系统层的东西,还是比较重要的. 一.什么是RunLoop 字面意思看是跑圈,也可以看作运行循 ...

  10. Exchange Server 2007的即将生命周期，您的计划是？

    多数人做微软技术,Exchange Server 几乎所有 Microsoft 产品,都具有产品支持生命周期,原厂提供的新增功能. 错误修复.安全修补程序等.产品生命周期通常持续时间 10 年,超过期 ...