文章目录[隐藏]

前言

最近自己练习写网页的时候遇到一个轮播卡带了，先写一个简单轮播，一步一步改造。

源码

<!DOCTYPE html>
<html>
    <header>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta http-equiv="X-UA-Compatible" content="IE=7">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮播测试</title>
        <style type="text/css">
            * {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .banner {
                position: relative;
                width: 550px;
                height: 300px;
                margin: 100px auto;
                overflow: hidden;
            }

            .b-items {
                position: absolute;
                left: 0;
                top: 0;
                width: 5000px;
                animation: all .5s;

            }

            .b-items li {
                float: left;
                margin: 0;
            }

            .b-items li>img {
                width: 100%;
                height: 300px;
            }

            .active {}

            .active:hover {
               /* transform-origin: 0 100% 0;
                transform-origin: 0 0;
                transform: rotateY(90deg) skew(0, 0deg);
                transition: 0.3s; */

            }
        </style>
    </header>
    <body>
        <div class="banner">
            <ul class="b-items" id="bItems">
                <li class="active"><a href="#" title="banner"><img src="images/1.jpg" alt="banner1"></a></li>
                <li><a href="#" title="banner"><img src="images/2.jpg" alt="banner1"></a></li>
                <li><a href="#" title="banner"><img src="images/3.jpg" alt="banner1"></a></li>
                <li><a href="#" title="banner"><img src="images/4.jpg" alt="banner1"></a></li>
            </ul>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                cloneDom();
                bannerMove();
            };

            const cloneDom = function() {
                let dom = document.getElementById("bItems");
                let firstDom = dom.children[0];
                let cloneLI = firstDom.cloneNode(true);
                dom.appendChild(cloneLI);
                console.log(dom.innerHTML)
            };

            const bannerMove = function() {
                let index = 1;
                let dom = document.getElementById("bItems");
                let domNum = dom.children.length;

                setInterval(function() {
                    if (index < domNum) {
                        // 执行轮播操作
                        console.log(-(550 * index))
                        dom.style.cssText = 'left: ' + (-(550 * index)) + 'px;';
                    } else {
                        // 跳转到第一个
                        index = 1;
                        dom.style.cssText = 'left: ' + (-(550)) + 'px;';
                    }
                    index++;
                }, 2000)
            };
        </script>
    </body>
</html>