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

柔光的暖阳◎ 2022-03-08 01:14 187阅读 0赞

## 首先是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;
                background-color: #abc;
            }
            ol li.current{
                background-color: pink;
                
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <ul id="box">
                <li style="z-index: 6;"><img src="images/1.jpg" alt=""/></li>
                <li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>
                <li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>
                <li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>
                <li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>
                <li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>
            </ul>
            <ol style="z-index: 10;" id="uu">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ol>
        </div>

接下来是js代码

\*\*

## 首先是我已经封装好的animate动画的函数，功能是可以实现自定义元素的动画 ##

\*\*

## 封装好函数之后开始写我们的主体代码 ##

**总结完毕**