2024年Web前端最新前端必备技能——轮播图（原生代码+插件）(2)，2024前端精选面试实战总结整理

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1.框架的搭建

2.样式的装扮

3.动画效果

鼠标经过轮播图

点击左右按钮图片就播放一张

图片滚动播放的同时小圆点也随之改变

鼠标经过轮播图暂停与运行

所有代码贴心附上

插件法插入轮播图

swiper插件插入轮播图

---

---

网页上的大致轮播图的滚动就是上面的演示

轮播图的制作

======

在制作轮播图的过程中我分成3步：框架的搭建——样式的装扮——动画效果。

1.框架的搭建

---

如下代码展示，就是先在HTML里搭建出一个框架来：

&lt

&gt

• 

• 

• 

• 

  2.样式的装扮

  ---

  如下代码展示，就是先在CSS里装饰出大致的轮播图样子：

  • {

  margin: 0;

  padding: 0;

  }

  a {

  text-decoration: none;

  }

  ul li {

  list-style-type: none;

  }

  ol li {