day17 10.21

day17 运动（下）

链式动画

动画执行完接另一个动画不断进行链接。

封装进行（通过传入回调函数完成链式运动）

//缓冲运动封装

//element表示当前的元素 target表示目标对象 callbackFn表示传入的回调函数

functionbufferAnimation(element,targetObj,callbackFn) {

//如果element为undefined就直接报错

if(!element){

thrownewError('元素不能缺少')

}

//给元素对象添加一个属性为timer他是一个定时器

element.timer=setInterval(()=>{

varflag=true

//遍历对象

for(letkeyintargetObj) {

//取出当前值

letcurrent=parseFloat(getStyle(element)[key])

//取出目标值

lettarget=targetObj[key]

//判断当前如果是位置的变化及对应的宽度高度的变化

if(key=='width'||key=='height'||key=='left'||key=='top'){

//步长负值向下取整正值向上取整

varstep=target-current>0?Math.ceil((target-current)/10):Math.floor((target-current)/10)

current+=step

element.style[key]=current+'px'

}

//如果是透明度的变化

if(key=='opacity'){

//步长负值向下取整正值向上取整

varstep=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(typeofcallbackFn=='function'){

callbackFn()

}

},20)

}

示例（先变化div的宽度和高度再变化他的位置）

<scriptsrc="./move.js"></script>

//先让div宽度和高度变化再改变他的位置

//获取div

vardiv=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>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="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:200pxauto;

/* 溢出隐藏 */

/* overflow: hidden; */

}

ul{

width:700%;

position:relative;

}

ul>li{

list-style:none;

float:left;

}

</style>

</head>

<body>

<divclass="showBox">

<ulclass="wrap">

</ul>

</div>

<scriptsrc="./move.js"></script>

//获取显示盒子

varshowBox=document.querySelector('.showBox')

//获取显示盒子的宽度

varshowWidth=parseFloat(getStyle(showBox).width)

//获取ul（需要切换位置的容器）

varwrap=document.querySelector('.wrap')

//封装一个autoMove的函数

functionautoMove(){

//切换图片的定时器

vari=0

vartimer=setInterval(()=>{

i++//这个i就是控制对应的位置的下标

//到达最后切换到第一个

if(i==wrap.children.length){

i=0

}

//移动对应的ul 0 -400 -800

//距离等于当前下标*对应显示盒子的宽度*-1

vardistance=i*showWidth*-1

bufferAnimation(wrap,{left:distance})

},2000)

}

//调用自动移动的方法

autoMove()

</script>

</body>

</html>

透明度切换

所有的图叠在一起

将前面的图片的透明度设置0 当前图片透明度设置1

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="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:200pxauto;

/* 溢出隐藏 */

/* overflow: hidden; */

}

ul>li{

list-style:none;

position:absolute;

opacity:0;

}

ul>li:nth-child(1){

opacity:1;

}

</style>

</head>

<body>

<divclass="showBox">

<ulclass="wrap">

</ul>

</div>

<scriptsrc="./move.js"></script>

//获取ul（需要切换位置的容器）

varwrap=document.querySelector('.wrap')

//封装一个autoMove的函数

functionautoMove(){

//切换图片的定时器

vari=0

vartimer=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>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

margin:0;

padding:0;

}

.showBox{

width:400px;

height:250px;

margin:200pxauto;

}

img{

width:100%;

}

</style>

</head>

<body>

<divclass="showBox">

<imgsrc="./images/slidepic1.jpg"alt="">

</div>

<scriptsrc="./move.js"></script>

//获取图片

varimg=document.querySelector('.showBox>img')

//封装一个autoMove的函数

functionautoMove(){

//切换图片的定时器

vari=1

vartimer=setInterval(()=>{

i++

if(i==7){

i=1

}

//设置图片的src

img.src=`./images/slidepic${i}.jpg`

},2000)

}

//调用自动移动的方法

autoMove()

</script>

</body>

</html>

无缝轮播（滚动轮播的进阶）

拷贝第一张到最后

判断是否到达最后一张如果到达立马设置对应的位置为第一张的位置

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="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:200pxauto;

/* 溢出隐藏 */

overflow:hidden;

}

ul{

width:800%;

position:relative;

}

ul>li{

list-style:none;

float:left;

}

</style>

</head>

<body>

<divclass="showBox">

<ulclass="wrap">

</ul>

</div>

<scriptsrc="./move.js"></script>

<scriptsrc="./carousel.js"></script>

//获取显示盒子

varshowBox=document.querySelector('.showBox')

//获取显示盒子的宽度

varshowWidth=parseFloat(getStyle(showBox).width)

//获取ul（需要切换位置的容器）

varwrap=document.querySelector('.wrap')

//拷贝第一张图加到最后

//克隆第一个li

varfirstLi=wrap.children[0].cloneNode(true)

vari=0

//将克隆的元素加入到ul

wrap.appendChild(firstLi)

//封装一个autoMove的函数

functionautoMove() {

//切换图片的定时器

vartimer=setInterval(()=>{

move(wrap,showWidth)

},2000)

}

// //调用自动移动的方法

autoMove()

//抽取方法 x轴移动移动的元素变化i值移动的宽度对应的方向（默认为正方向）

functionmove(element,showWidth,isAsc=true) {

if(isAsc) {

i++

}else{

i--

}

//移动对应的ul 0 -400 -800

//距离等于当前下标*对应显示盒子的宽度*-1

vardistance=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>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="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:200pxauto;

/* 溢出隐藏 */

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:05px;

}

.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-repeatcenter;

background-size:contain;

left:0;

}

.arrow>.next{

background:url(./images/next.png)no-repeatcenter;

background-size:contain;

right:0;

}

</style>

</head>

<body>

<divclass="showBox">

<ulclass="wrap">

</ul>

<ulclass="cirList">

</ul>

<divclass="arrow">

<ahref=""class="prev"></a>

<ahref=""class="next"></a>

</div>

<scriptsrc="./move.js"></script>

<scriptsrc="./carousel.js"></script>

</body>

</html>

js代码

主体代码

//获取显示盒子

varshowBox=document.querySelector('.showBox')

//获取显示盒子的宽度

varshowWidth=parseFloat(getStyle(showBox).width)

//获取ul（需要切换位置的容器）

varwrap=document.querySelector('.wrap')

//获取焦点的盒子

varcirList=document.querySelector('.cirList')

//获取箭头的盒子

vararrow=document.querySelector('.arrow')

//变化的下标

vari=0

//焦点取值的下标

varindex=0

//定时器

vartimer

//调用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的下标

letclcikIndex=Array.from(cirList.children).findIndex((v)=>{

//如果当前操作的对象是遍历的对象那么返回出去

returnv==e.target

})-1

//改变对应位置及下标

index=clcikIndex

i=clcikIndex

//调用move移动

move(wrap,showWidth)

}

//初始化生成焦点的方法

functioninit() {

//拷贝之前生成对应的焦点

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

varfirstLi=wrap.children[0].cloneNode(true)

//将克隆的元素加入到ul

wrap.appendChild(firstLi)

}

//封装一个autoMove的函数

functionautoMove() {

//切换图片的定时器

timer=setInterval(()=>{

move(wrap,showWidth)

},2000)

}

//封装一个焦点变化的函数传入的index表示当前要设置的焦点

functionchangeCir(index) {

//排他思维

//先将所有的class清除

Array.from(cirList.children).forEach((li)=>{

li.className=''

})

//再给自己添加对应的样式

cirList.children[index].className='selected'

}

//抽取方法 x轴移动移动的元素变化i值移动的宽度对应的方向（默认为正方向）

functionmove(element,showWidth,isAsc=true) {

//先检索区间

rangeCheck(element,isAsc)

//再进行i值变化

if(isAsc) {

i++

index++

}else{

i--

index--

}

//焦点切换及区间检索

rangeCheckCir(element)

//执行动画

//移动对应的ul 0 -400 -800

//距离等于当前下标*对应显示盒子的宽度*-1

vardistance=i*showWidth*-1

bufferAnimation(element, {

left:distance

}, ()=>{

})

}

//区间检索i下标

functionrangeCheck(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'

}

//区间检索对应的焦点下标值

functionrangeCheckCir(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地址

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官网