轮播图_添加节流阀
1）节流阀的目的
//1 避免我们连续点击按钮 图片播放过快的问题
//2 当上一个函数动画内容执行完毕，再去执行下一个动画，让事件无法连续触发
2）核心思路
//1 利用回调函数 添加一个变量 锁住函数和解锁函数
//2 开始这是一个变量 var flag = true;
//3 if(flag){flag=false; do something} 关闭水龙头
//4 利用回调函数，动画执行完毕 flag = true 打开水龙头
3）简单验证节流阀
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button>按钮</button> <script> var btn = document.querySelector('button'); var flag = true; btn.onclick = function () { if (flag) { flag = false;//关闭节流阀 console.log(11); console.log(11); console.log(11); console.log(11); console.log(11); console.log(11); console.log(11); say('刘德华',function () { flag = true;//回调函数执行完成后 打开节流阀 }) } } //定义一个函数 function say(name,callback){ alert(name); } </script> </body> </html>
4）轮播图代码
添加了节流阀
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="animate.js"></script>
<title>轮播图添加节流阀</title>
<style>
* {
margin: 0;
padding: 0
}
img {
border: 0; /*ie6*/
vertical-align: middle;
}
.banner {
position: relative;
width: 721px;
height: 455px;
margin: 100px auto;
background-color: pink;
overflow: hidden;
}
.banner ul {
position: absolute;
top: 0;
left: 0;
width: 800%;
}
.banner li {
list-style: none;
float: left;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
width: 60px;
height: 60px;
line-height: 40px;
background: rgba(10,10, 10, .9);
text-align: center;
font-size: 18px;
color: white;
z-index: 2;
}
.arrow-r {
right: 0;
}
/*小圆圈*/
.circle {
position: absolute;
bottom: 10px;
left: 50%;
}
.circle li {
float: left;
width: 12px;
height: 12px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background: #fff;
}
</style>
</head>
<body>
<div class="banner">
<!--左侧箭头-->
<a href="javascript:;" class="arrow-l"><</a>
<!--右侧箭头-->
<a href="javascript:;" class="arrow-r">></a>
<!--核心滚动区域-->
<ul>
<li><a href=""><img src="image/banner1.jpg" alt=""></a></li>
<li><a href=""><img src="image/banner2.jpg" alt=""></a></li>
<li><a href=""><img src="image/banner3.jpg" alt=""></a></li>
<li><a href=""><img src="image/banner4.jpg" alt=""></a></li>
</ul>
<!-- 小圆圈 -->
<ol class="circle">
</ol>
</div>
<script>
//load加载事件
window.onload = function () {
var banner = document.querySelector('.banner');//banner主体
var arrowL = document.querySelector('.arrow-l');//左箭头
var arrowR = document.querySelector('.arrow-r');//右箭头
var ul = banner.querySelector('ul');
var ol = banner.querySelector('ol');
var bannerW = banner.offsetWidth;//得到图片的宽度 默认banner盒子和图片宽度一致
//1 鼠标经过 按钮显示
banner.addEventListener('mouseenter',function () {
arrowL.style.display = 'block';
arrowR.style.display = 'block';
clearInterval(timer);
timer = null;
});
// 鼠标离开 按钮隐藏
banner.addEventListener('mouseleave',function () {
arrowL.style.display = 'none';
arrowR.style.display = 'none';
//鼠标离开 开启定时器
timer = setInterval(function () {
arrowR.click();//手动调用点击事件
},2000);
});
//2 动态循环生成小圆圈
for (var i = 0; i < ul.children.length; i++) {
//2.1 创建元素
var li = document.createElement('li');
//3.1 给小圆点添加一个自动属性 来记录它的索引号
li.setAttribute('data-index',i);
//2.2 添加元素
ol.appendChild(li);
//2.3 给小圆圈添加点击事件 并使用排他思想
li.addEventListener('click',function () {
//干掉所有人 清除所有li的 current的类名
for (var i = 0; i < ol.children.length;i++) {
ol.children[i].className = '';
}
//留下我自己 添加current类名
this.className = 'current';//this指向函数的调用者
//3 点击小圆圈 移动图片 [移动的是ul]
//ul的移动距离 = 小圆点的索引 * 图片宽度
var index = this.getAttribute('data-index');//获得小圆点的自定义索引号
//6.1 num是控制按钮点击图片的 当我们点击了li 我们拿到li的索引号 给了num
num = index;
circle = index;
animate(ul,-index * bannerW);
});
}
//2.4 把ol的第一个小圆圈添加选中状态
ol.children[0].className = 'current';
//4 克隆第一张图片
var firstLi = ul.children[0].cloneNode(true);
ul.appendChild(firstLi);
//num变量控制图片的变化
var num = 0;
//circle变量控制小圆点的变化
var circle = 0;
//节流阀
var flag = true;
//5 点击右侧按钮 图片滚动一张
arrowR.addEventListener('click',function () {
if (flag) {
flag = false;//关闭节流阀
//如果到了最后一张复制的图片 我们就让ul的left值为0
if (num == ul.children.length -1) {
ul.style.left = '0';
num = 0;//
}
num++;
animate(ul,-num * bannerW,function () {
flag = true;//打开节流阀
});
//6 点击右侧按钮 小圆圈跟随一起变化
circle++;
//如果走到了最后克隆的图片 我们就把它置为0
if (circle == ol.children.length) {
circle = 0;
}
//调用小按钮怕他函数
circleChange();
}
});
//7 左侧按钮
arrowL.addEventListener('click',function () {
if (flag) {
flag = false;
//等于0就是第一张了 让它迅速的切换到第四张
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * bannerW + 'px';
}
num--;
animate(ul,-num * bannerW,function () {
flag = true;//打开节流阀
});
circle--;
//小于0 说明已经是第一张图片，再点击切换到最后一张图片 则小圆圈要改为最后一个小圆圈
//circle = circle < 0 ? ol.children.length -1 : circle; 三元表达式
if (circle < 0 ) {
circle = ol.children.length -1;
}
//调用小按钮怕他函数
circleChange();
}
});
//8 定时播放功能
var timer = setInterval(function () {
//手动调用点击事件
arrowR.click();
},2000);
//点击按钮控制小园点变化函数
function circleChange(){
//排他思想 干掉别人
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下自己
ol.children[circle].className = 'current';
}
}
</script>
</body>
</html>
