淘宝首页的轮播动态效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            bottom: 0;
        }
        
        #banner {
            overflow: hidden;
            width: 1000px;
            height: 800px;
            background: url("./picture/bg.jpg");
            margin: 0 auto;
            position: relative;
        }
        
        #img {
            width: 200%;
            height: 200%;
        }
        
        #img li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 250px;
            top: 150px;
        }
        
        .item {
            opacity: 0;
            transition: all .5s;
        }
        
        #dot {
            padding-left: 0px;
            position: absolute;
            right: 415px;
            bottom: 300px;
            z-index: 1000;
        }
        
        .point {
            width: 8px;
            height: 8px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 100%;
            float: left;
            margin-right: 13px;
            border: 1px solid rgba(0, 0, 0, 0.6);
            cursor: pointer;
        }
        
        #prev {
            left: 250px;
        }
        
        #next {
            left: 736px;
        }
        
        .btn {
            width: 50px;
            height: 100px;
            position: absolute;
            top: 270px;
            z-index: 100;
            opacity: 0.7;
            cursor: pointer;
        }
        
        .item.active {
            z-index: 10;
            opacity: 1;
        }
        
        .point.active {
            background: white;
        }
    </style>
</head>

<body>
    <div id="banner">
        <ul id="img">
            <li class="item active"><img src="./picture/img1.jpg"></li>
            <li class="item"><img src="./picture/img2.jpg"></li>
            <li class="item"><img src="./picture/img3.jpg"></li>
            <li class="item"><img src="./picture/img4.jpg"></li>
            <li class="item"><img src="./picture/img5.jpg"></li>
        </ul>
        <ul id="dot">
            <li class="point active" data-index="0"></li>
            <li class="point" data-index='1'></li>
            <li class="point" data-index='2'></li>
            <li class="point" data-index='3'></li>
            <li class="point" data-index='4'></li>
        </ul>
        <button id="prev" class="btn"><img src="./images/ar.png"></button>
        <button id="next" class="btn"><img src="./images/ar2.png"></button>
    </div>
    <script>
        let items = document.getElementsByClassName('item');
        let prev = document.getElementById("prev");
        let next = document.getElementById("next");
        let points = document.getElementsByClassName('point');

        let index = 0; //表示第几张图片在展示和第几个点，第index张照片有active这个类名

        // 清除classname
        let clearActer = function() {
                for (let i = 0; i < items.length; i++) {
                    items[i].className = 'item';
                    points[i].className = 'point'

                }
            }
            // 改变classname实现改变
        let goIndex = function() {
                clearActer();
                items[index].className = 'item active';
                points[index].className = 'point active'

            }
            // 下一张按钮
        let goNext = function() {
                if (index < 4) {
                    index++;
                } else {
                    index = 0;
                }
                goIndex();
            }
            // 上一张按钮
        let goPre = function() {
                if (index == 0) {
                    index = 4;
                } else {
                    index--;
                }
                goIndex();
            }
            // next点击句柄
        next.addEventListener("click", function() {
                goNext();
            })
            // prev点击句柄
        prev.addEventListener("click", function() {
                goPre();
            })
            // 点击点改变图片
        for (let i = 0; i < points.length; i++) {
            points[i].addEventListener("click", function() {
                let poitIndex = this.getAttribute('data-index');
                index = poitIndex;
                goIndex();
            })
        }
        // 自动轮播定时器
        window.onload = function() {
            setInterval(goNext, 2000);
        }
    </script>
</body>

</html>
posted @ 2020-07-15 21:12  zayyo  阅读(413)  评论(0)    收藏  举报