animate用法 js原生_animate动画、原生JS实现轮播图

写在前面

最近在写项目的时候，才发现自己对css3这部分的内容已经生疏了，复习css3的时候，看到animate属性，就用其写了个焦点轮播图，当然自己也用原生JS码了个，当然css3动画无疑是锦上添花，还是要多总结啊，源码我们会在最后附上git地址，好了，下面我们就来说说他们是如何分别实现轮播效果的。

正文

一、css3-animate动画

CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：

1)通过类似Flash动画中的帧来声明一个动画；

2)在animation属性中调用关键帧声明的动画。

注：当然，虽然这个属性得到了大多数浏览器的支持，但是到现在为止还是要加前缀的，不然不能够被识别。

@keyframes

@keyframes 作为关键帧配合animate属性使用，它的样式规则是由多个百分比组成的，animate在使用它属性的时候，可以达到不断变化的效果。

animate实现轮播思路

首先我们将所轮播的图片和控制图片的按钮放在一个大的div框中，使用定位将他们布局到合适的位置；为了使一个div框只显示一个，我们需要用overflow：hidden将其余的图片隐藏起来；为了使其可以实现无缝传动，我们需要在尾部放上第一张图片，然后使用animate和@keyframes实现图片的轮播。

轮播图html文件

animation实现lunbo效果title>

head>

1 a>

2 a>

3 a>

4 a>

5 a>

div>

div>

body>

html>

这个 没有什么好说的了，就是将图片和按钮放在一个大的盒子里面；值的注意的一个是，在第五张图片后面我们又继续加了第一张图片，其目的是为了实现 无缝转动。

css的设置

#waiceng{

width: 500px;

height: 375px;

position: absolute;

border-radius: 5px;

overflow: hidden; //使div框中只能显示一张图片，其余的将被隐藏。

}

#photos img{

width: 500px;

height: 375px;

float: left; //使图片向左浮动，又由于是定位是absolute,所以就浮到上一行去了;

}

#photos{

position: absolute;

width: calc(500px * 6); //使盒子能够容纳图片的宽度，以至于不被撑破。

}

在这一部分中，我们主要对几个盒子进行了定位，将图片显示在一行上，然后使div框中只能够显示一张图片。

.play{

animation:leftMove 10s ease-out infinite; /*无限循环这个过程*/

}

@keyframes leftMove{

0%{margin-left:0px;}

20%{margin-left:-500px;}

40%{margin-left:-1000px;}

60%{margin-left:-1500px;}

80%{margin-left:-2000px;}

100%{margin-left:-2500px;}

}

在这一部分中，animate调用@keyframes的关键帧来声明一个动画；animation: leftMove 10s ease-out infinite;这条语句的意思是：调用leftMove且图片是以先快后慢(快进慢出)的状态在10s中完成图片的轮播且无限循环这个过程。

.num{

position:absolute;

width:20px;

height:20px;

right:5px;

top:345px;

background-color:green;

cursor:pointer; //鼠标覆盖上按钮成手的样子

z-index:1;

text-align:center;

color:white;

opacity:0.8;

}

.num:hover,#photos:hover{

animation-play-state:paused; //当鼠标覆盖在按钮上或鼠标覆盖在

图片上时会停止轮播效果。

}

.num:hover{

background-color:blue; //鼠标覆盖上去按钮会换成蓝色。

}

这部分代码是将按钮进行定位并设置其样式，且当鼠标覆盖在按钮上或鼠标覆盖在

图片上时会停止轮播效果；z-index = 1(默认为0)是让其可以显示在图片的上方，不然图片会将按钮进行覆盖。

.num:nth-child(4){margin-right: 30px;}

.num:nth-child(3){margin-right: 60px;}

.num:nth-child(2){margin-right: 90px;}

.num:nth-child(1){margin-right: 120px;}//将按钮设置间隔，使其都可以呈现

/*将数字与图片信息进行绑定*/

#a1:hover ~ #photos{animation: move1 .5s ease-out forwards;}

#a2:hover ~ #photos{animation: move2 .5s ease-out forwards;}

#a3:hover ~ #photos{animation: move3 .5s ease-out forwards;}

#a4:hover ~ #photos{animation: move4 .5s ease-out forwards;}

#a5:hover ~ #photos{animation: move5 .5s ease-out forwards;}

@keyframesmove1{100%{margin-left: 0px;}}

@keyframesmove2{100%{margin-left: -500px;}}

@keyframesmove3{100%{margin-left: -1000px;}}

@keyframesmove4{100%{margin-left: -1500px;}}

@keyframesmove5{100%{margin-left: -2000px;}}

.num:nth-child()：属性主要是将num父元素下的第几个num进行设置样式，为按钮进行样式的设置；下面是将按钮与图片信息进行绑定，当点击按钮的时候，图片可以瞬间回到我们想要的图片上，forwards 是保持到当前图片的最后一帧，即：我们鼠标所点下的那个图片。

实现效果

二、原生JS实现轮播

使用原生JS是我们一般常用的方法，这个我讲讲思路就行，源码会给git地址。

原生JS实现轮播的样式表设置与先前的设置是一样的，只是js上的内容罢了。在JS面，我们需要实现的功能有：DOM操作、事件的运用、定时器、JS动画、函数的递归调用、使图片无限滚动。实现了这几个功能，那么轮播图也就应运而生了，这部分网上的代码特别多，我就不再这里过多的赘述了。当然，如果有什么疑问的话，欢迎随时讨论。

如果想要获取源码的话，欢迎点击：git源码地址。