animate动画、原生JS实现轮播图

最新推荐文章于 2024-09-02 09:55:06 发布

rememberyf

最新推荐文章于 2024-09-02 09:55:06 发布

阅读量8.3k

点赞数 4

分类专栏： JavaScript 前端 css 文章标签：轮播图 animate动画原生JS手撕轮播图

本文链接：https://blog.csdn.net/rememberyf/article/details/80633816

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

写在前面

最近在写项目的时候，才发现自己对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文件

<!DOCTYPE html>
<html>
    <head>
        <title>animation实现lunbo效果</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="animation.css">
    </head>
    <body>
        <div id="waiceng">
            <a id = "a1" class = "num"> 1 </a>
            <a id = "a2" class = "num"> 2 </a>
            <a id = "a3" class = "num"> 3 </a>
            <a id = "a4" class = "num"> 4 </a>
            <a id = "a5" class = "num"> 5 </a>
            <div id = "photos" class = "play">
                <img src="../image/hu1.jpg">
                <img src="../image/hu2.jpg">
                <img src="../image/hu3.jpg">
                <img src="../image/hu4.jpg">
                <img src="../image/hu5.jpg">
                <img src="../image/hu1.jpg">
            </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;}
@keyframes move1{100%{margin-left: 0px;}}
@keyframes move2{100%{margin-left: -500px;}}
@keyframes move3{100%{margin-left: -1000px;}}
@keyframes move4{100%{margin-left: -1500px;}}
@keyframes move5{100%{margin-left: -2000px;}}

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

实现效果

轮播效果

二、原生JS实现轮播

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

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