JS轮播图--无缝滚动

最新推荐文章于 2022-11-05 16:33:29 发布

嘿皮~~

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量655

点赞数 3

分类专栏： js 文章标签：轮播图

本文链接：https://blog.csdn.net/qq_40581760/article/details/89743039

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS轮播图–无缝滚动

利用相对定位改变left值，实现轮播图滚动效果。

<div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

 * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box {
            width: 400px;
            height: 200px;
            margin: 0 auto;
            border: 1px solid #000000;
            overflow: hidden;
        }
        ul {
            position: relative;
            top: 0;
            left: 0;
            width: 1600px;
        }
        li {
            float: left;
            width: 400px;
            height: 200px;
        }
        li:first-child {
            background: #0ff;
        }
        li:nth-child(2) {
            background: #ff0;
        }
        li:nth-child(3) {
            background: #0f0;
        }
        li:nth-child(4) {
            background: #f0f;
        }

        var box = document.getElementsByClassName('box')[0];
        var ul = box.children[0];
        var num = 0;
        var clear = null;
        clear = setInterval(autoplay, 5);
        function autoplay() {
            num--;
            num <= -1200 ? num = 0 : num;
            ul.style.left = num + 'px';
        }
        // 鼠标经过最外面div停止
        box.οnmοuseοver=function(){
            clearInterval(clear);
        }
        // 鼠标移开div开始运动
        box.οnmοuseοut=function(){
            clear=setInterval(autoplay,5);
        }