十分简单的纯JavaScript实现京东淡入淡出轮播，js透明动画

最新推荐文章于 2021-06-02 19:10:04 发布

前端大师

最新推荐文章于 2021-06-02 19:10:04 发布

阅读量501

点赞数

分类专栏：前端学习文章标签： JavaScript轮播原生js

本文链接：https://blog.csdn.net/qq_37016677/article/details/88542016

版权

本文展示了如何用纯JavaScript实现京东风格的淡入淡出轮播效果，通过封装animate动画函数，结合HTML和CSS，详细阐述了主体代码的编写过程。

摘要由CSDN通过智能技术生成

首先是HTML代码和css代码就不过多介绍了，直接放上来

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        ul,ol{ list-style: none;}
        .wrapper{
            width: 670px;
            height: 240px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        ul{
        	position:relative;
        }
        ul li{
        	position:absolute;
        	top:0;
        	left:0;
        }
        ol{
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 190px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: default;