js 透明度轮播图

js 透明度轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小潘的轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .slider {
            width: 700px;
            height: 400px;
            border: 3px solid red;
            position: relative;
        }
        .slider .list .item{
            position: absolute;
            left: 0px;
            top: 0px;
            opacity: 0;
        }
        img{
            width: 700px;
            height: 400px;
        }
        .slider .list .item:first-of-type {
            opacity: 1;
        }
        .slider .next, .slider .last {
            position: absolute;
            top: 200px;
        }
        .slider .next {
            left: 670px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul class="list">
            <li class="item"><img src="./img/2.jpg"></li>
            <li class="item"><img src="./img/1.jpg"></li>
            <li class="item"><img src="./img/3.jpg"></li>
            <li class="item"><img src="./img/4.jpg"></li>
        </ul>
        <button class="last" onclick="vary(0)">last</botton>
        <button class="next" onclick="vary(1)">next</botton>
    </div>
    <script>
        var now = 0, next = 1;
        var list = document.getElementsByClassName("item");
        const vary = (flag) => {
            now = flag === 1 ? (now + 1) %4 : (now +3) %4;
            next = flag === 1 ? (next + 1) %4 : (next +3) %4;
            list[now].style.opacity = 0;
            list[next].style.opacity = 1;
        }
        setInterval ( () => {
            vary(1);
        } , 2000);
    </script>
</body>
</html>
posted @ 2020-04-23 16:09  clienter  阅读(126)  评论(0)    收藏  举报