day17 运动（下）
链式动画
动画执行完接另一个动画不断进行链接。
封装进行（通过传入回调函数完成链式运动）
//缓冲运动封装
//element表示当前的元素 target表示目标对象 callbackFn表示传入的回调函数
function bufferAnimation(element, targetObj,callbackFn) {
//如果element为undefined就直接报错
if(!element){
throw new Error('元素不能缺少')
}
//给元素对象添加一个属性为timer他是一个定时器
element.timer = setInterval(() => {
var flag = true
//遍历对象
for (let key in targetObj) {
//取出当前值
let current = parseFloat(getStyle(element)[key])
//取出目标值
let target = targetObj[key]
//判断当前如果是位置的变化及对应的宽度高度的变化
if(key=='width' || key == 'height' || key == 'left' || key == 'top')
{
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) /
10):Math.floor((target - current) / 10)
current += step
element.style[key] = current + 'px'
}
//如果是透明度的变化
if(key == 'opacity'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) * 1000
/ 10):Math.floor((target - current)*1000 / 10)
current += step / 1000
element.style[key] = current
}
//如果是层高直接赋值
if(key == 'zIndex'){
element.style[key] = target
}
//如果没有完成就是false
if(current != target){
flag = false
}
}
//如果全部走完了就清除
if(flag){
clearInterval(element.timer)
//调用回调函数 如果传入的参数是函数
if(typeof callbackFn == 'function'){
callbackFn()
}
}
},20)
}
示例（先变化div的宽度和高度 再变化他的位置）
<div></div>
<button></button>
<script src="./move.js"></script>
<script>
//先让div宽度和高度变化 再改变他的位置
//获取div
var div = document.querySelector('div')
document.querySelector('button').onclick = function () {
//调用缓冲动画 (俩个异步操作 你不知道对应的异步什么时候走完)
//可以进行二次封装 通过回调函数来解决异步的问题 （使异步变同步代码）
bufferAnimation(div, {
width: 200,
height: 300
}, () => {
//变化位置
bufferAnimation(div, {
left: 500
}, () => {
//变化位置
bufferAnimation(div, {
left: 100
})
})
})
}
</script>
轮播图
核心
对应图的切换
滚动切换 （更改的是对应大盒子的位置）
透明度切换 （更改的时候对应图片的透明度）
简单图片切换 （直接变化对应的图片）
滚动切换
对应大盒子里面容纳多个图片
图片的大小和显示盒子的大小一致
对应的大盒子的大小超出了对应的显示盒子（溢出隐藏）
根据对应的切换的下标来控制对应的大盒子的位置
<!DOCTYPE html>
<html lang="en">
<head>
<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;
}
.
showBox,li{
width: 400px;
height: 250px;
}
li>img{
width: 100%;
}
.
showBox{
margin: 200px auto;
/* 溢出隐藏 */
/* overflow: hidden; */
}
ul{
width: 700%;
position: relative;
}
ul>li{
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt=""></li>
<li><img src="./images/slidepic2.jpg" alt=""></li>
<li><img src="./images/slidepic3.jpg" alt=""></li>
<li><img src="./images/slidepic4.jpg" alt=""></li>
<li><img src="./images/slidepic5.jpg" alt=""></li>
<li><img src="./images/slidepic6.jpg" alt=""></li>
<li><img src="./images/slidepic7.jpg" alt=""></li>
</ul>
</div>
<script src="./move.js"></script>
<script>
//获取显示盒子
var showBox = document.querySelector('.showBox')
//获取显示盒子的宽度
var showWidth = parseFloat(getStyle(showBox).width)
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//封装一个autoMove的函数
function autoMove(){
//切换图片的定时器
var i = 0
var timer = setInterval(()=>{
i++ //这个i就是控制对应的位置的下标
//到达最后 切换到第一个
if(i==wrap.children.length){
i = 0
}
//移动对应的ul 0 -400 -800
//距离等于 当前下标*对应显示盒子的宽度*-1
var distance = i * showWidth * -1
bufferAnimation(wrap,{left:distance})
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>
</html>
透明度切换
所有的图叠在一起
将前面的图片的透明度设置0 当前图片透明度设置1
<!DOCTYPE html>
<html lang="en">
<head>
<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;
}
.
showBox,li{
width: 400px;
height: 250px;
}
li>img{
width: 100%;
}
.
showBox{
margin: 200px auto;
/* 溢出隐藏 */
/* overflow: hidden; */
}
ul>li{
list-style: none;
position: absolute;
opacity: 0;
}
ul>li:nth-child(1){
opacity: 1;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt=""></li>
<li><img src="./images/slidepic2.jpg" alt=""></li>
<li><img src="./images/slidepic3.jpg" alt=""></li>
<li><img src="./images/slidepic4.jpg" alt=""></li>
<li><img src="./images/slidepic5.jpg" alt=""></li>
<li><img src="./images/slidepic6.jpg" alt=""></li>
<li><img src="./images/slidepic7.jpg" alt=""></li>
</ul>
</div>
<script src="./move.js"></script>
<script>
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//封装一个autoMove的函数
function autoMove(){
//切换图片的定时器
var i = 0
var timer = setInterval(()=>{
//改透明度 将之前的全部设置为0
bufferAnimation(wrap.children[i],{opacity:0},function(){
i++ //这个i就是控制对应的位置的下标
//到达最后 切换到第一个
if(i==wrap.children.length){
i = 0
}
// 再将自己的透明度改为1
bufferAnimation(wrap.children[i],{opacity:1})
})
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>
</html>
图片切换
根据下标的变化 切换对应的图片
<!DOCTYPE html>
<html lang="en">
<head>
<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;
}
.
showBox{
width: 400px;
height: 250px;
margin: 200px auto;
}
img{
width: 100%;
}
</style>
</head>
<body>
<div class="showBox">
<img src="./images/slidepic1.jpg" alt="">
</div>
<script src="./move.js"></script>
<script>
//获取图片
var img = document.querySelector('.showBox>img')
//封装一个autoMove的函数
function autoMove(){
//切换图片的定时器
var i = 1
var timer = setInterval(()=>{
i++
if(i==7){
i = 1
}
//设置图片的src
img.src = `./images/slidepic${i}.jpg`
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>
</html>
无缝轮播（滚动轮播的进阶）
拷贝第一张到最后
判断是否到达最后一张 如果到达立马设置对应的位置为第一张的位置
<!DOCTYPE html>
<html lang="en">
<head>
<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;
}
.
showBox,
li {
width: 400px;
height: 250px;
}
li>img {
width: 100%;
}
.
showBox {
margin: 200px auto;
/* 溢出隐藏 */
overflow: hidden;
}
ul {
width: 800%;
position: relative;
}
ul>li {
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt=""></li>
<li><img src="./images/slidepic2.jpg" alt=""></li>
<li><img src="./images/slidepic3.jpg" alt=""></li>
<li><img src="./images/slidepic4.jpg" alt=""></li>
<li><img src="./images/slidepic5.jpg" alt=""></li>
<li><img src="./images/slidepic6.jpg" alt=""></li>
<li><img src="./images/slidepic7.jpg" alt=""></li>
</ul>
</div>
<script src="./move.js"></script>
<script src="./carousel.js"></script>
<script>
//获取显示盒子
var showBox = document.querySelector('.showBox')
//获取显示盒子的宽度
var showWidth = parseFloat(getStyle(showBox).width)
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//拷贝第一张图加到最后
//克隆第一个li
var firstLi = wrap.children[0].cloneNode(true)
var i = 0
//将克隆的元素加入到ul
wrap.appendChild(firstLi)
//封装一个autoMove的函数
function autoMove() {
//切换图片的定时器
var timer = setInterval(() => {
move(wrap, showWidth)
}, 2000)
}
// //调用自动移动的方法
autoMove()
//抽取方法 x轴移动 移动的元素 变化i值 移动的宽度 对应的方向（默认为正方向）
function move(element, showWidth, isAsc = true) {
if (isAsc) {
i++
} else {
i--
}
//移动对应的ul 0 -400 -800
//距离等于 当前下标*对应显示盒子的宽度*-1
var distance = i * showWidth * -1
//执行动画
bufferAnimation(element, {
left: distance
}, () => {
//到达最后下标
if (i == element.children.length - 1 && isAsc) {
//i的值重新变成0
i = 0
}
if (i == 0 && !isAsc) {
//立即设置位置 到第一张设置位置为最后一张
i = element.children.length - 1
}
//设置位置
element.style.left = i * showWidth * -1 + 'px'
})
}
</script>
</body>
</html>
升级版带焦点的轮播
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<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;
}
.
showBox,
li {
width: 400px;
height: 250px;
}
li>img {
width: 100%;
}
.
showBox {
position: relative;
margin: 200px auto;
/* 溢出隐藏 */
overflow: hidden;
}
ul {
width: 800%;
position: relative;
}
ul>li {
list-style: none;
float: left;
}
.
cirList {
position: absolute;
right: 20px;
bottom: 10px;
width: 150px;
}
.
cirList>li {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 5px;
}
.
cirList .selected {
background-color: red;
}
.
arrow{
display: none;
}
.
arrow>a{
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.
arrow>.prev{
background: url(./images/prev.png) no-repeat center;
background-size: contain;
left: 0;
}
.
arrow>.next{
background: url(./images/next.png) no-repeat center;
background-size: contain;
right: 0;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt=""></li>
<li><img src="./images/slidepic2.jpg" alt=""></li>
<li><img src="./images/slidepic3.jpg" alt=""></li>
<li><img src="./images/slidepic4.jpg" alt=""></li>
<li><img src="./images/slidepic5.jpg" alt=""></li>
<li><img src="./images/slidepic6.jpg" alt=""></li>
<li><img src="./images/slidepic7.jpg" alt=""></li>
</ul>
<!-- 焦点 -->
<ul class="cirList">
</ul>
<div class="arrow">
<a href="" class="prev"></a>
<a href="" class="next"></a>
</div>
</div>
<script src="./move.js"></script>
<script src="./carousel.js"></script>
</body>
</html>
js代码
主体代码
//获取显示盒子
var showBox = document.querySelector('.showBox')
//获取显示盒子的宽度
var showWidth = parseFloat(getStyle(showBox).width)
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//获取焦点的盒子
var cirList = document.querySelector('.cirList')
//获取箭头的盒子
var arrow = document.querySelector('.arrow')
//变化的下标
var i = 0
//焦点取值的下标
var index = 0
//定时器
var timer
//调用init的方法
init()
//调用自动移动的方法
autoMove()
//给showBox添加移入事件
showBox.onmouseenter = function () {
//清除定时器
clearInterval(timer)
//显示箭头的盒子
arrow.style.display = 'block'
}
//移出继续执行
showBox.onmouseleave = function () {
//调用轮播
autoMove()
//隐藏
arrow.style.display = 'none'
}
//给箭头添加事件
Array.from(arrow.children).forEach((v, i) => {
v.onclick = (e) => {
e = e || window.event
//禁止a标签默认行为
e.preventDefault();
move(wrap, showWidth, i)
}
})
//给cirList下面的li添加点击事件 事件委托机制
cirList.onclick = function (e) {
e = e || window.event
//判断当前操作的元素是否为li
if (e.target.tagName == 'LI') {
//获取当前点击的li的下标
let clcikIndex = Array.from(cirList.children).findIndex((v) => {
//如果当前操作的对象是遍历的对象那么返回出去
return v == e.target
})-1
//改变对应位置及下标
index = clcikIndex
i = clcikIndex
//调用move移动
move(wrap, showWidth)
}
}
//初始化生成焦点的方法
function init() {
//拷贝之前生成对应的焦点
Array.from(wrap.children).forEach((v, i) => {
//在第一个焦点添加一个class名字为selected
if (i == 0) {
cirList.innerHTML += `<li class='selected'></li>`
} else {
//生成对应的焦点加入到cirList里面
cirList.innerHTML += `<li></li>`
}
})
//拷贝第一张图加到最后
//克隆第一个li
var firstLi = wrap.children[0].cloneNode(true)
//将克隆的元素加入到ul
wrap.appendChild(firstLi)
}
//封装一个autoMove的函数
function autoMove() {
//切换图片的定时器
timer = setInterval(() => {
move(wrap, showWidth)
}, 2000)
}
//封装一个焦点变化的函数 传入的index表示当前要设置的焦点
function changeCir(index) {
//排他思维
//先将所有的class清除
Array.from(cirList.children).forEach((li) => {
li.className = ''
})
//再给自己添加对应的样式
cirList.children[index].className = 'selected'
}
//抽取方法 x轴移动 移动的元素 变化i值 移动的宽度 对应的方向（默认为正方向）
function move(element, showWidth, isAsc = true) {
//先检索区间
rangeCheck(element, isAsc)
//再进行i值变化
if (isAsc) {
i++
index++
} else {
i--
index--
}
//焦点切换及区间检索
rangeCheckCir(element)
//执行动画
//移动对应的ul 0 -400 -800
//距离等于 当前下标*对应显示盒子的宽度*-1
var distance = i * showWidth * -1
bufferAnimation(element, {
left: distance
}, () => {
})
}
//区间检索i下标
function rangeCheck(element, isAsc) {
//到达最后下标
if (i >= element.children.length - 1 && isAsc) {
//i的值重新变成0
i = 0
}
if (i <= 0 && !isAsc) {
//立即设置位置 到第一张设置位置为最后一张
i = element.children.length - 1
}
//设置位置
element.style.left = i * showWidth * -1 + 'px'
}
//区间检索对应的焦点下标值
function rangeCheckCir(element) {
//判断焦点下标
if (index < 0) { //8张图 下标为 0-7 7个焦点 下标 0-6
index = element.children.length - 2
}
if (index > element.children.length - 2) {
index = 0
}
//更改焦点
changeCir(index)
}
辅助代码
//缓冲运动封装
//element表示当前的元素 target表示目标对象 callbackFn表示传入的回调函数
function bufferAnimation(element, targetObj,callbackFn) {
//如果element为undefined就直接报错
if(!element){
throw new Error('元素不能缺少')
}
//清除上一个定时器影响 (保证只有一个定时器)
clearInterval(element.timer)
//给元素对象添加一个属性为timer他是一个定时器
element.timer = setInterval(() => {
var flag = true
//遍历对象
for (let key in targetObj) {
//取出当前值
let current = parseFloat(getStyle(element)[key])
//取出目标值
let target = targetObj[key]
//判断当前如果是位置的变化及对应的宽度高度的变化
if(key=='width' || key == 'height' || key == 'left' || key == 'top')
{
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) /
10):Math.floor((target - current) / 10)
current += step
element.style[key] = current + 'px'
}
//如果是透明度的变化
if(key == 'opacity'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) * 1000
/ 10):Math.floor((target - current)*1000 / 10)
current += step / 1000
element.style[key] = current
}
//如果是层高直接赋值
if(key == 'zIndex'){
element.style[key] = target
}
//如果没有完成就是false
if(current != target){
flag = false
}
}
//如果全部走完了就清除
if(flag){
clearInterval(element.timer)
//调用回调函数 如果传入的参数是函数
if(typeof callbackFn == 'function'){
callbackFn()
}
}
},0)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element, '')
} else {
return element.currentStyle
}
}
重点
逻辑的掌握
dom操作
定时器操作
错误的解决
定时器里面套定时器 ( 如果外面的执行时间要比里面的短 会导致里面的定时器无法被清除 (定时器
的作用范围内要清除对应的定时器) )
知识点的运用
封装 (函数封装 抽取共同点)
同步和异步 (通过回调函数解决 定时器是异步的 事件也是异步的)
第三方动画的js
move.js
github地址
<div class="box"></div>
<div class="mybox"></div>
<script src='https://cdn.bootcdn.net/ajax/libs/move.js/0.5.0/move.js'></script>
<script>
move('.box')
.
to(500, 200) //位置改变 x为500 y为200
.
rotate(180) //旋转180deg
.
scale(.5) //缩小0.5倍
.
set('background-color', '#888')//背景颜色
.
set('border-color', 'black')//边框颜色
.
duration('2s')//执行时间
.
skew(50, -10) //偏移
.
then() //成功
// .set('opacity', 0) //透明度为0
.
duration('0.3s') //时间
.
scale(0.1) //缩小
.
pop() //加上他才能执行颜色设置相关的内容
.
end(); //动画结束
//背景颜色变成绿色
// 位置 变成 300 300
// 旋转 180deg
// 上面做完 放大2倍
move('.mybox')
.
to(300,300)
.
set('background-color', '#f0f')
.
rotate(180)
.
duration('3s')
.
then().scale(2).duration('10s').pop().end()
</script>
animated.css (封装了css3的动画效果)
cdn
https://cdn.staticfile.org/animate.css/4.1.1/animate.min.css
官网地址
swiper.js (封装轮播图)
swiper官网
