淘宝式轮播图切换太快BUG

最新推荐文章于 2021-06-26 16:04:47 发布

贪吃ღ大魔王

最新推荐文章于 2021-06-26 16:04:47 发布

阅读量522

点赞数 2

分类专栏： debug 解决问题代码手写文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_44070254/article/details/116799636

版权

在项目中遇到一个问题，当手动或定时切换淘宝式轮播图时，如果速度过快，会出现跳转BUG。问题出现在点击右侧切换按钮或设定切换时间过短的情况下。目前尚未找到解决方案，寻求技术大牛的帮助。

摘要由CSDN通过智能技术生成

项目场景：

淘宝式轮播图

问题描述：

手动切换太快，或者设置定时间时间太短，切换都会出现的跳转BUG，

在这里插入图片描述

BUG源码：

JS：

   class swiper {
   
            constructor() {
   
                this.ullis = this.$('ul li', true);
                this.ul = this.$('ul');
                this.ol = this.$('ol');
                this.screen = this.$('#screen');
                this.createIndex();
                this.box = this.$('#box');
                this.imgW = this.ullis[0].offsetWidth;
                this.index = 0;
                this.times;
                this.timess;
                this.box.addEventListener('mouseover', this.overFn.bind(this));
                this.box.addEventListener('mouseout', this.outFn.bind(this));
                // 给左右按钮设置点击
                this.$('#left').addEventListener('click', this.leftClick.bind(this));
                this.$('#right').addEventListener('click', this.rightClick.bind(this));
                this.autoplay();
            }
            // 添加序列号
            createIndex() {
   
                let length = this.ullis.length;
                for (var i = 0; i < length; i++) {
   
                    let li = document.createElement('li');
                    li.innerHTML = i + 1;
                    i == 0 && (li.className = 'current');
                    this.ol.appendChild(li);
                    li.addEventListener('click', this.olliclick.bind(this));
                }
                this.olli = this.$('ol li'