[html+css+js] 小米官网首页制作

在i 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ndex.js中轮播图的左右按钮的监听事件里，有一个flag，它起的就是节流阀的作用，说白了就是防止点击按钮频率太快，导致图片动画没加载完就跑飞了：

这里的轮播图是简化版本，没有加底下的小圆点，且不能动态生成，下面附上原生js轮播图的高配版本（带有注释），感兴趣的同学可以自行修改：

window.addEventListener(‘load’, function() {

// 1. 获取元素

var arrow_l = document.querySelector(‘.arrow-l’);

var arrow_r = document.querySelector(‘.arrow-r’);

var focus = document.querySelector(‘.focus’);

var focusWidth = focus.offsetWidth;

// 2. 鼠标经过focus 就显示隐藏左右按钮

focus.addEventListener(‘mouseenter’, function() {

arrow_l.style.display = ‘block’;

arrow_r.style.display = ‘block’;

clearInterval(timer);

timer = null; // 清除定时器变量

});

focus.addEventListener(‘mouseleave’, function() {

arrow_l.style.display = ‘none’;

arrow_r.style.display = ‘none’;

timer = setInterval(function() {

//手动调用点击事件

arrow_r.click();

}, 2000);

});

// 3. 动态生成小圆圈 有几张图片，我就生成几个小圆圈

var ul = focus.querySelector(‘ul’);

var ol = focus.querySelector(‘.circle’);

// console.log(ul.children.length);

for (var i = 0; i < ul.children.length; i++) {

// 创建一个小li

var li = document.createElement(‘li’);

// 记录当前小圆圈的索引号 通过自定义属性来做

li.setAttribute(‘index’, i);

// 把小li插入到ol 里面

ol.appendChild(li);

// 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件

li.addEventListener(‘click’, function() {

// 干掉所有人 把所有的小li 清除 current 类名

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].className = ‘’;

}

// 留下我自己 当前的小li 设置current 类名

this.className = ‘current’;

// 5. 点击小圆圈，移动图片 当然移动的是 ul

// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值

// 当我们点击了某个小li 就拿到当前小li 的索引号

var index = this.getAttribute(‘index’);

// 当我们点击了某个小li 就要把这个li 的索引号给 num

num = index;

// 当我们点击了某个小li 就要把这个li 的索引号给 circle

circle = index;

// num = circle = index;

console.log(focusWidth);

console.log(index);

animate(ul, -index * focusWidth);

})

}

// 把ol里面的第一个小li设置类名为 current

ol.children[0].className = ‘current’;

// 6. 克隆第一张图片(li)放到ul 最后面

var first = ul.children[0].cloneNode(true);

ul.appendChild(first);

// 7. 点击右侧按钮， 图片滚动一张

var num = 0;

// circle 控制小圆圈的播放

var circle = 0;

// flag 节流阀

var flag = true;

arrow_r.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 * focusWidth, function() {

flag = true; // 打开节流阀

});

// 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放

circle++;

// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原

if (circle == ol.children.length) {

circle = 0;

}

// 调用函数

circleChange();