js实现按钮控制图片向左、向右、向上、向下无缝轮播

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/70332502

本文介绍了如何使用JavaScript实现一个按钮控制的图片无缝轮播效果，支持向左、向右、向上、向下四个方向切换。通过理解轮播原理，结合DOM操作和事件监听，可以创建出流畅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>向左、向右、向上、向下无缝滚动</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }

            .button{
                width: 640px;
                margin: 50px 0 0 80px;
            }

            .button input{
                width: 80px;
                height: 40px;
                line-height: 40px;
                border: none;
                outline: none;
                background: #8E3E8B;
                border-radius: 10px;
                color: #fff;
                font-size: 14px;
                margin-left: 20px;
                cursor: pointer;
            }

            ul,li{list-style: none;}

            .js-mask{
                width: 640px;
                height: 350px;
                border: 1px solid black;
                position: relative;
                overflow: hidden;
                margin: 20px 0 0 100px;
            }

            .js-mask ul{
                position: absolute;
                top: 0;
                left: 0;

            }

            .js-mask ul  li{
            /*  float: left;*/
                width: 640px;
                height: 350px;
            }

            .js-mask ul img{
                width: 640px;
                height: 350px;
                display: block;
                border: none;
            }
        </style>
    </head>
    <body>
        <div class="button">
            <input type="button" value="向左滚动"/>
            <input type="button" value="向右滚动"/>
            <input type="button" value="向上滚动"/>
            <input type="button" value="向下滚动"/>
        </div>
        <div class="js-mask">
            <ul>
                <li><img src="img/1.jpeg" alt="" /></li>
                <li><img src="img/2.jpg" alt="" /></li>
                <li><img src="img/3.jpg" alt="" /></li>
                <li><img src="img/4.jpg" alt="" /></li>
                <li><img src="img/5.jpeg" alt="" /></li>
                <li><img src="img/6.jpg" alt="" /></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">

        (function(){
            //获取button
            var buttons=document.querySelectorAll('.button input');
            //获取ul
            var oUl = document.querySelectorAll('.js-mask ul')[0];
            // 获取ul里的li进行拼接，然后重新赋给ul
            // 由于ul初始时是4张图片的宽度，现在把宽度/高度变成是8张的宽度/高度
            oUl.innerHTML+=oUl.innerHTML;
            var speed = 6;
            var timer;
            // 获取li，根据li的宽度/高度重新设置ul的宽度/高度
            var oLies = document.querySelectorAll('.js-mask li');// 获取li


            //向左滚动
            buttons[0].onclick = function(){
                clearInterval(timer);
                for(var i=0;i<oLies.length;i++){
                    oLies[i].style.float='left';   //li左浮动
                };
                oUl.style.width=oLies[0].offsetWidth * oLies.length + 'px';// 设置ul宽度，li的宽度*li的个数
                timer=setInterval(function(){  
                    var speed = -6;
                    if(oUl.offsetLeft <= -oUl.offsetWidth*.5){
                        oUl.style.left = '0px';    //重置 -oUl.offsetWidth*.5=-640
                    };
                    oUl.style.left = oUl.offsetLeft + speed + 'px'; //ul的位置
                },100);
            };


            //向右滚动
            buttons[1].onclick = function(){
                clearInterval(timer);
                for(var i=0;i<oLies.length;i++){
                    oLies[i].style.float='left';   //li左浮动
                };
                var speed = 6;
                oUl.style.left=oUl.offsetWidth*.5;  //设置初始位置
                oUl.style.width=oLies[0].offsetWidth * oLies.length + 'px';// 设置ul宽度，li的宽度*li的个数
                timer=setInterval(function(){  
                    if(oUl.offsetLeft >= 0){
                        oUl.style.left = '-640px';    //重置
                    };
                    oUl.style.left = oUl.offsetLeft + speed + 'px'; //ul的位置
                },100);
            };


            //向上滚动
            buttons[2].onclick = function(){
                clearInterval(timer);
                var speed = -6;
                oUl.style.height=oLies[0].offsetHeight * oLies.length + 'px';// 设置ul宽度，li的宽度*li的个数
                timer=setInterval(function(){
                    if(oUl.offsetTop<=-oUl.offsetHeight*.5){
                        oUl.style.top = '0px';
                    };
                    oUl.style.top = oUl.offsetTop + speed +'px';
                },100);
            };


            //向下滚动
            buttons[3].onclick = function(){
                clearInterval(timer);
                var speed = 6;
                oUl.style.top='-350px';
                oUl.style.height=oLies[0].offsetHeight * oLies.length + 'px';// 设置ul宽度，li的宽度*li的个数
                timer=setInterval(function(){
                    if(oUl.offsetTop>=0){
                        oUl.style.top = '-350px';
                    };
                    oUl.style.top = oUl.offsetTop + speed +'px';
                },100);
            };  
        })()
    </script>
</html>