在做轮播模块的时候遇到问题是：你在 连续指示小按钮 时候再去 只有 点击 下一张按钮，出现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. Java代码审查工具findbugs的使用总结

    findbugs简介 Findbugs是一个Java代码静态分析工具,可以用它来检查源代码中可能出现的问题,以期尽可能在项目的初始阶段将代码问题解决. FindBugs检查的是类或者JAR文件即字节代 ...

  2. Struts2之Result详解

    上一篇我们把Struts2中的Action接收参数的内容为大家介绍了,本篇我们就一起来简单学习一下Action的4种Result type类型,分为:dispatcher(服务端页面跳转):redir ...

  3. 学习HTML5一周的收获1

    HTML5的基本结构 学习了title标签(显示网站名称),link标签(链接文件,可做网页美化) 快捷键:Ctrl+/ 注释 学习[meta标签] 1.charset属性:单独使用,设置文档字符集编 ...

  4. PHP命名空间的概念与使用

    命名空间在其它编程语言中其名称不尽相同,但其核心慨念都是自定义一个存储空间.避免类名重复系统无法判断该执行哪一个类或是哪一个函数. 举例说明下.我先创建test这个文件夹在其当前目录下再创建一个ind ...

  5. 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛

    1734: [Usaco2005 feb]Aggressive cows 愤怒的牛 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 217  Solved: ...

  6. swift -- 基础

    swift -- 基础 1.常量和变量 常量: let 变量: var 2.声明常量和变量 常量的声明: let let  a = 1         //末尾可以不加分号,等号两边的空格必须对应(同 ...

  7. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  9. Android开发之自定义视图

    继承View 1.重写onMeasure(int wMeasureSpec,int hMeasureSpec)处理程序,这样可以标明视图尺寸 2.重写onDraw,以便绘制我们自己的自定义视图内 3. ...

  10. Android Weekly Notes Issue #249

    Android Weekly Issue #249 March 19th, 2017 Android Weekly Issue #249 本期内容包括: 一个设计的实现Demo讨论; Kotlin的C ...