“节流阀“ 在轮播图的使用

简介: “节流阀“ 在轮播图的使用

节流阀的作用:等上一张图片动画函数执行完成时,才能再次点击按钮播放下一张图片,无法让事件连续触发

节流阀的使用:

节流阀的使用很简单,我们需要先给其一个全局变量,例如 flag,给其赋值为 true,当我们点击按钮时先判断,只有 true 才能执行动画函数,我们在点击一次后,立马将其变量覆盖为 false,这样就无法连续触发了,有人会问,可是这样不就仅仅能够点击一次就再也无法点击了吗??对,解决这个问题就用上了我们动画函数中的第三个形参 ------- 回调函数,不清楚回调函数是什么的朋友们可以点进去我的这篇文章中有讲解:回调函数 ,我们很清楚如果有回调函数则是在动画执行完毕后才触发,因此我们在这个回调函数中再将我们的 flag 值改为 true 就可以啦。

在此我们只把右侧按钮的点击事件拿来讲解:

此处代码为右侧点击按钮,左侧按钮同理

flag=true;    //定义变量
    rightbtn.addEventListener('click',function(){
        if(flag==true){   //点击后判断,只有为true 才能执行
            flag=false;    //判断后立马重新赋值为flase
            if(num==circleul.children.length-1){
                circleul.style.left=0;
                num=0;
            }
            num++;
            long=num*windows.offsetWidth-6*num;
            run(circleul,-long,function(){   //添加了回调函数
                flag=true;   //动画函数执行完后 重新赋值为true
            });
        //小圆圈跟着一起变化
            circlechange++;
            if(circlechange==circleul.children.length-1){
               circlechange=0;
            }
            for(var i=0;i<circleol.children.length;i++){
                 circleol.children[i].className='';
            }
            circleol.children[circlechange].className='circlecolor';
        }
    })v
目录
相关文章
|
6月前
|
JavaScript
uniapp写轮播图?
uniapp写轮播图?
|
6月前
|
JavaScript 前端开发
原生js做轮播图
原生js做轮播图
28 0
|
JavaScript 容器
使用 swiper 做轮播图
使用 swiper 做轮播图
782 0
使用 swiper 做轮播图
轮播图片上添加描述
在轮播图片中添加描述,通过在每个`&lt;div class=&quot;carousel-item&quot;&gt;`内加入`&lt;div class=&quot;carousel-caption&quot;&gt;`来设置图片描述。示例展示了如何为轮播图添加标题和内容,并介绍了相关类的作用,如`.carousel`创建轮播、`.carousel-indicators`添加指示符等,实现图片的切换及动画效果。
轮播图片上添加描述
|
2月前
|
JavaScript 索引
轮播图,用vue来写一个简单的轮播图
本文介绍了如何使用Vue.js编写一个简单的轮播图功能,包括左右箭头的点击事件处理和使用v-bind、v-show指令进行图片地址绑定和箭头显示隐藏的逻辑。
轮播图,用vue来写一个简单的轮播图
|
5月前
|
前端开发 UED
CSS动画(轮播图)
CSS动画(轮播图)
|
6月前
|
JavaScript 前端开发 索引
用四种方法实现轮播图
用四种方法实现轮播图
145 0
|
6月前
|
前端开发 JavaScript
轮播图的实现
轮播图的实现
41 0
|
11月前
|
前端开发
HTML+CSS实现轮播图效果
HTML+CSS实现轮播图效果
|
JavaScript
原生js实现轮播图
vue2走马灯有官方bug无法解决,为此用原生js实现了一个轮播图
161 4
原生js实现轮播图