在做轮播模块的时候遇到问题是：你在 连续指示小按钮 时候再去 只有 点击 下一张按钮，出现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. 【Harmony】概述

      原文来自本人的微信公众号文章  系统工程实验室     引言 基于模型的系统工程(简称MBSE,英文全称Model based System Engineering )的实践至少需要三个维度的支撑 ...

  2. Objective-C日记-之KVC

    KVC(Key-Value-Coding?) 1, 概述 以字符串形式向对象的实例变量或属性(Property)发送或者获得值的方法. 2,用法 a,取值 @property (readwrite,c ...

  3. Sort List leetcode

    这个题一开始本想用快速排序的,但是想了20分钟都没有头绪,难点在于快速排序的随机访问无法用链表实现,不过如果可以实现快速排序partition函数就可以了,但是这可能比较复杂,于是改用其他排序方法,上 ...

  4. enum类型的本质（转）

    原地址:http://www.cppblog.com/chemz/archive/2007/06/05/25578.html 至从C语言开始enum类型就被作为用户自定义分类有限集合常量的方法被引入到 ...

  5. Mac上关于shell使用Python3和C++11声明

    1.使用Python3 Mac上的shell上自带的Python版本是2.7,当需要使用Python3时,下载安装好Python时,在shell上敲入Python发现却还是显示Python2.7,这是 ...

  6. CoreAnimation 核心动画

    - (void)createBaseAnimation{ //基础动画 CABasicAnimation *animation = [CABasicAnimation animation]; anim ...

  7. 统计solr multivalued 字段中数目

    问题是这样的:已有若干multivalued 字段, 需要统计出 multivalued 字段中数目. 比如 *DOC1* <doc> <arr name="multi&q ...

  8. JavaMail邮件发送不成功的那些坑人情况及分析说明

    [我的Segmentfault原文]https://segmentfault.com/a/1190000008030346 前言   JavaMail的使用本身并不难,网上有不少案例,简单易懂,而且有 ...

  9. Maven项目搭建（一）：Maven初体验

    今天给大家介绍一个项目管理和综合工具:Maven. Maven: maven读作 ['meivin],本意是指可以被信任的领域专家,致力于传播知识(来自于http://en.wikipedia.org ...

  10. GitHub开源：升讯威ADO.NET增强组件 sheng.ADO.NET.Plus V1.3

    GitHub: https://github.com/iccb1013/sheng.ADO.NET.Plus 早前分享过,当时没有把代码上传到Github,只是通过邮件的形式分享给了部分需要的朋友,最 ...