在做轮播模块的时候遇到问题是：你在 连续指示小按钮 时候再去 只有 点击 下一张按钮，出现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. iOS 图片裁剪 + 旋转

    iOS 图片裁剪 + 旋转 之前分别介绍了图片裁剪和图片旋转方法 <iOS 图片裁剪方法> 地址:http://www.cnblogs.com/silence-cnblogs/p/6490 ...

  2. 使用ocupload和POI一键上传Excel并解析导入数据库

    使用的工具如下:  JQuery ocupload jquery.ocupload-1.1.2.js Apache POI poi-3.9.jar 如果是Maven项目添加依赖如下: <depe ...

  3. css3滚动效果

    .css{ -webkit-transition-duration: .3s;    transition-duration: .3s; }

  4. WebGIS中自定义互联网地图局部注记的一种方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.    前言 实际项目中我们经常会遇到这样一种场景:地图底图可能是互 ...

  5. 数据库-增删改查操作SQL实现

    一.数据插入-Insert 1. 插入单条记录 insert into 表名(字段名,字段名,字段名) //当插入所有字段时,字段名可以省略 values('值1','值2','值3'); 2. 插入 ...

  6. mysql数据库开启慢查询日志

    修改配置文件 在配置文件my.ini中加上下面两句话 log-slow-queries = C:\xampp\mysql_slow_query.log long_query_time=3 第一句使用来 ...

  7. [Linux] PHP程序员玩转Linux系列-自动备份与SVN

    我的代码经常在开发修改,为了代码的安全性,比如哪天误删了文件,或者哪天改错东西了,可以恢复回来,我要搞代码备份.备份代码,我先做最简单的,使用linux的定时机制加shell命令打包文件,每天按日期保 ...

  8. Spring——scope详解（转载）

    摘自<spring 解密> scope用来声明IOC容器中的对象应该处的限定场景或者说该对象的存活空间,即在IOC容器在 对象进入相应的scope之前,生成并装配这些对象,在该对象不再处于 ...

  9. canvas基础—图形变换

    1.canvas转换方法 1.1canvas转换方法 二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...

  10. Office 365开发环境概览

    本文于2017年3月26日首发于LinkedIn,原文链接请参考这里 本系列文章已经按照既定计划在每周更新,此前的几篇文章如下 Office 365 开发概览系列文章和教程 Office 365开发概 ...