[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();

[html+css+js] 小米官网首页制作相关推荐

【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
小米官网项目制作——javascript知识分享上
目录前言一.整体架构二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子四.轮播图 1.本体的部件 ...
小米官网项目制作——javascript知识分享下
目录前言一.观察页面内容二.切换界面三.登录表单界面 1.选中的效果 2.错误提示 3.不选中的效果 4.密码框四.注册界面五.链接跳转总结前言之前我分享了关于小米官网主页的java ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
html实训QQ音乐官网首页制作
QQ音乐官网首页 html <!DOCTYPE html> <html lang="en"> <head><link rel=" ...
css:动画小米官网盒子阴影心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
HTML/CSS实现小米官网搜索框效果
效果图: 需求分析: 1.输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. ...

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

[html+css+js] 小米官网首页制作相关推荐

最新文章

热门文章