<button>测试按钮</button>
<div></div>
<script>
var btn = document.querySelector('button')
var div = document.querySelector('div')
function move (obj, attr, target, speed, callback) {
// 关闭上一个定时器
clearInterval(obj.timer);
// 获取元素当前位置
var current = parseInt(getStyle(obj, attr));
// 判断速度的正负值
if (current > target) {
// 此时速度应为负值
speed = -speed;
}
// 开启一个定时器,用来执行动画效果
// 向执行动画的对象添加一个timer属性,用来保存它自己的定时器
obj.timer = setInterval(function () {
// 获取目标原来的left值
var oldValue = parseInt(getStyle(obj, attr));
// 在旧值的基础上增加
var newValue = oldValue + speed;
/*
向左移动时,需要判断newValue是否小于target
向右移动时,需要判断newValue是否大于target
*/
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值赋予目标
obj.style[attr] = newValue + 'px';
// 当元素移动到target时,停止执行动画
if (newValue == target) {
// 达到目标关闭定时器
clearInterval(obj.timer);
// 动画执行完毕调用回调函数 callback
callback && callback();
}
}, 30);
}
function getStyle (obj, name) {
if (window.getComputedStyle) {
// 正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
// IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
btn.addEventListener('click', function () {
move(div, "left", 300, 10, function () {
move(div,"width",500,10,function() {
move(div,"height",300,10,function(){
move(div,"bottom",100,10,function(){
move(div,"top",100,10,function(){
move(div,"left",-200,10,function(){})
})
})
})
})
})
})
</script>
🏃网页轮播图
-------
轮播图也称为焦点图，是网页中比较常见的特效，今天做一下这个典型案例。
### 🍉制作轮播图的空间盒子，用来存放图片
我们可以根据自己的喜好设置自己轮播图的相关样式，这里就就需要借助HTML和CSS了，讲真**HTML和CSS是重点基础**，如果这两个没学好，是制作不出自己想要的样式，更别提后面的JS以及相关框架了，基础才是最重要的。
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 设置outer样式 */
#outer{
/* 设置宽高 */
width: 820px;
height: 452px;
/* 居中 */
margin: 50px auto;
/* 设置背景颜色 */
background-color: #008c8c;
/* 设置padding */
padding: 10px 0;
/* 开启相对定位 */
position: relative;
/* 溢出隐藏 */
overflow: hidden;
}
/* 设置imgList */
#imgList{
/* 去除项目符号 */
list-style: none;
/* 设置ul宽度 */
/* width: 3280px; */
/* 开启绝对定位 */
position: absolute;
/* 设置偏移量，每向左移动820px 就会显示下一张图片 */
}
/* 设置li */
#imgList li{
/* 设置浮动 */
float: left;
/* 设置左右外边距 */
margin: 0 10px;
}
/* 设置导航按钮 */
.navDiv{
/* 开启绝对定位 */
position: absolute;
/* 设置位置 */
bottom: 20px;
/* left: 35%; */
}
.navDiv a{
/* 设置浮动，浮动之后，行内元素就能设置宽高 */
float: left;
/* 设置宽高 */
width: 25px;
height: 25px;
/* 设置背景颜色 */
background-color: #f00;
/* 设置左右外边距 */
margin: 0 15px;
/* 设置半透明 */
opacity: .5;
/* 设置圆角 */
border-radius: 50%;
}
/* 设置鼠标移入效果 */
.navDiv a:hover{
background-color: green;
}
</style>
<!-- 创建一个外部的div作为一个大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="./01.jpeg"></li>
<li><img src="./02.jpeg"></li>
<li><img src="./03.jpeg"></li>
<li><img src="./04.jpeg"></li>
<li><img src="./01.jpeg"></li>
</ul>
<!-- 设置导航按钮 -->
<div class="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
**这里需要注意两点**：
轮播图的按钮是要通过JS来居中，因为如果借助CSS居中，就会写死，后期添加图片又要重新设置。
**javascript:;**是一个伪协议，加在超级链接上就可以防止 链接跳转，从而可以给链接JS上写自己想执行的代码。javascript:void(0) 表示一个死链接，执行空事件。
### 🍊点击小圆圈可以播放相应的图片
通过JS书写动态给按钮进行居中，并设置一个点击事件，来进行图片的切换并且按钮样式虽图片的变化而变化，这里借用了“排他思想”，先干掉所有人，然后保留自己人。
### 🍋鼠标不点击，轮播图会自动播放
自动播放就涉及动画函数了，根据上文的回调地狱的讲解，将动画函数move进行封装。如下：
function move(obj,attr,target,speed,callback){
// 关闭上一个定时器
clearInterval(obj.timer);
// 获取元素当前位置
var current = parseInt(getStyle(obj,attr));
// 判断速度的正负值
if(current > target){
// 此时速度应为负值
speed = -speed;
}
// 开启一个定时器,用来执行动画效果
// 向执行动画的对象添加一个timer属性,用来保存它自己的定时器
obj.timer = setInterval(function(){
// 获取目标原来的left值
var oldValue = parseInt(getStyle(obj,attr));
// 在旧值的基础上增加
var newValue = oldValue + speed;
/*
向左移动时,需要判断newValue是否小于target
向右移动时,需要判断newValue是否大于target
*/
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
newValue = target;
}
// 将新值赋予目标
obj.style[attr] = newValue + 'px';
// 当元素移动到target时,停止执行动画
if(newValue == target){
// 达到目标关闭定时器
clearInterval(obj.timer);
// 动画执行完毕调用回调函数 callback
callback && callback();
}
},30);
}
function getStyle(obj,name){
if(window.getComputedStyle){
// 正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
// IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
接下里通过引入move函数实现动画效果。
可以看到代码中，我们设计了一个定时器实现自动切换图片，并设计**在点击函数中关闭定时器**，这样就不会出现点击事件和自动播放发生冲突，造成图片的怪异播放现象。
### 🍌完整代码
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 设置outer样式 */
#outer{
/* 设置宽高 */
width: 820px;
height: 452px;
/* 居中 */
margin: 50px auto;
/* 设置背景颜色 */
background-color: #008c8c;
/* 设置padding */
padding: 10px 0;
/* 开启相对定位 */
position: relative;
/* 溢出隐藏 */
overflow: hidden;
}
/* 设置imgList */
#imgList{
/* 去除项目符号 */
list-style: none;
/* 设置ul宽度 */
/* width: 3280px; */
/* 开启绝对定位 */
position: absolute;
/* 设置偏移量，每向左移动820px 就会显示下一张图片 */
}
/* 设置li */
#imgList li{
/* 设置浮动 */
float: left;
/* 设置左右外边距 */
margin: 0 10px;
}
/* 设置导航按钮 */
.navDiv{
/* 开启绝对定位 */
position: absolute;
/* 设置位置 */
bottom: 20px;
/* left: 35%; */
}
.navDiv a{
/* 设置浮动，浮动之后，行内元素就能设置宽高 */
float: left;
/* 设置宽高 */
width: 25px;
height: 25px;
/* 设置背景颜色 */
background-color: #f00;
/* 设置左右外边距 */
margin: 0 15px;
/* 设置半透明 */
opacity: .5;
/* 设置圆角 */
border-radius: 50%;
}
/* 设置鼠标移入效果 */
.navDiv a:hover{
background-color: green;
}
</style>
<script>
window.addEventListener('load',function(){
// 获取ul标签
var ul = document.querySelector('#imgList')
// 获取ul下li的子元素的个数,并给ul动态赋予宽度值
ul.style.width = ul.children.length * 820 + 'px';
// 设置导航按钮动态居中
var navDiv = document.querySelector('.navDiv');
var outer = document.querySelector('#outer');
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + 'px';
// 默认显示图片的索引
var index = 0;
// 获取所有的a
var aAll = document.querySelector('.navDiv').querySelectorAll('a');
// 设置默认选中效果
aAll[index].style.backgroundColor = 'green';
// 为所有超链接绑定响应函数
for(var i = 0;i<aAll.length;i++){
// 为每一个超链接都添加一个num属性
aAll[i].num = i;
// 为超链接绑定点击响应函数
aAll[i].addEventListener('click',function(){
//关闭自动切换的定时器
clearInterval(stop);
// 获取超链接的索引,并将其设置为index
index = this.num;
// 切换图片
// imgList.style.left = -820*index + 'px';
setA();
move(imgList,"left",-820*index,20,function(){
//动画执行完毕，开启自动切换
autoChange();
})
})
}
// // 开启自动切换图片
autoChange();
// 创建一个方法用来选中a
function setA(){
// 判断当前索引是否是第一张
if(index >= ul.children.length-1){
// 则将index设置为0
index = 0;
// 此时显示最后一张图片，而最后一张图片和第一张一模一样
// 通过CSS将最后一张切换成第一张
imgList.style.left = 0 + 'px';
}
for(var i = 0;i<aAll.length;i++){
aAll[i].style.backgroundColor = '';
}
// 创建点击时的颜色
aAll[index].style.backgroundColor = 'green';
}
// 创建一个函数,用来开启自动切换图片
// 定义一个自动切换的定时器的标识
var stop;
function autoChange(){
// 开启一个定时器,用来定时切换图片
stop = setInterval(function(){
// 使索引自增
index++;
// 判断index的值
index %= ul.children.length;
文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页
