JS实现无缝滚动轮播图的原理

用JS实现无缝滚动轮播图的方法有很多，我自己瞎琢磨了一个，

原理非常简单，就是点击按钮的一瞬间，把 ul 拉到某一个位置，

然后再滑动，这样就成了无缝滑动

为了说明原理，我特意简化了代码，整个JS加一起只有15行，

这样也方便大家看明白，只要看懂了原理，再按自己的需求改就非常方便了

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0;}
        #box{
            width: 600px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        ul{
            overflow: hidden;
            list-style: none;
            position: relative;
            left: 0;
        }
        li{
            width: 200px;
            height: 100px;
            line-height: 100px;
            float: left;
            color: #fff;
            font-size: 30px;
            text-align: center;
        }
    
    </style>
</head>
<body>
    
    <div id="box">
        <ul>
            <li style="background: red">1</li>
            <li style="background: yellow">2</li>
            <li style="background: blue">3</li>
        </ul>
    </div>
    <input type="button" value="左边" id="btn1">
    <input type="button" value="右边" id="btn2">

    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
    <script>
        window.onload = function(){

            var ul = document.querySelector('ul');
            var btn1 = document.querySelector('#btn1');
            var btn2 = document.querySelector('#btn2');

            ul.style.width = '1200px'
            ul.innerHTML += ul.innerHTML; 

            
            btn1.onclick = function(){

                if ( ul.offsetLeft == 0 ) {
                    ul.style.left = '-600px';
                }
                               
                var num = ul.offsetLeft + 200;

                $("ul").animate({left: num}, "slow");
            }

            btn2.onclick = function(){

                if ( ul.offsetLeft == -600 ) {
                    ul.style.left = 0;
                }

                var num = ul.offsetLeft - 200;

                $("ul").animate({left: num}, "slow");
            }
        }
    </script>
</body>
</html>

JS实现无缝滚动轮播图的原理

猜你喜欢