js transition: left .5s ease 0s; 过渡写轮播案例跑马灯轮播图特效

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 900px;
            height: 281px;
            margin: 50% auto;
            background-color: black;
            overflow: hidden;
        }
        
        #ula {
            width: 3600px;
        }
        
        #box ul {
            position: relative;
            width: 8000px;
            height: 281px;
            left: 0px;
            transition: left .5s ease 0s;
        }
        
        #ula li {
            float: left;
            list-style: none;
            width: 900px;
        }
        
        #lr {
            position: absolute;
            top: 1100px;
            left: 750px;
        }
    </style>
    <div id="box">
        <ul id="ula">
            <li><img src="images/11.jpg" alt=""></li>
            <li><img src="images/22.jpg" alt=""></li>
            <li><img src="images/33.jpg" alt=""></li>
            <li><img src="images/44.jpg" alt=""></li>
            <li><img src="images/55.jpg" alt=""></li>
        </ul>

    </div>
    <div id="lr">
        <a href="javascript:;" id="lt">11</a>
        <a href="javascript:;" id="rt">22</a>
    </div>

    <script>
        var ula = document.getElementById('ula');
        var lt = document.getElementById('lt');
        var rt = document.getElementById('rt');
        var cloneli = ula.firstElementChild.cloneNode(true);
        ula.appendChild(cloneli);

        var inx = 0;
        lt.onclick = function() {
            if (inx == 0) {
                ula.style.transition = 'none';
                ula.style.left = -5 * 900 + 'px';
                setTimeout(function() {
                    ula.style.transition = 'left .5s ease 0s';
                    inx = 4;
                    ula.style.left = -inx * 900 + 'px';

                }, 0);

            } else {
                inx--;
                ula.style.left = -inx * 900 + 'px';
            }
        }


        rt.onclick = function() {
            ula.style.transition = 'left .5s ease 0s';
            inx++;
            if (inx > 4) {
                setTimeout(function() {
                    ula.style.transition = 'none';
                    ula.style.left = 0;
                    inx = 0
                }, 500);
            }
            ula.style.left = -inx * 900 + 'px';
        }
    </script>
</body>

</html>

发表评论