两组li向左滚动代码

发布时间：2018-06-27 23:39:15作者：魏义齐阅读：()评论：

本文为博主原创文章，未经博主允许不得转载。

最近给客户写页面遇到这样一个问题，同一个页面有两个li向左滚动的模块，第一个是在网上找的代码，第二个我想着复制第一个但是没效果，改类名和js都没用，只能另找一个了，这也是我为什么整理两组的原因。

说到li滚动，很多人首先会想到marquee，因为操作简单，但是marquee经过我的测试在火狐浏览器和IE浏览器里面有抖动的现象，而且抖动的频率很高。

下面我把我整理的两组代码分享出来（注：我整理的代码都是重写的，很精简，大家不用担心有冗余的代码在里面）。

第一组：

预览链接：https://blog.weiyiqi.net/lookdoc/li_left1/

因为有js库，我就不贴代码了，直接提供下载链接：https://pan.baidu.com/s/1KK2CIidsUfyNe4RZAC845g

第二组：

html代码：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>li向左滚动2-软件素材-魏义齐个人博客</title>

    <link type="text/css" rel="stylesheet" href="css/index.css">

</head>

<body>

<div class="case">

    <div id="scroll"><a href="javascript：;" class="btn_left"></a> <a href="javascript：;" class="btn_right"></a>

        <div class="content">

            <ul>

                <li>one</li>

                <li>two</li>

                <li>three</li>

                <li>four</li>

                <li>five</li>

                <li>six</li>

                <li>seven</li>

            </ul>

        </div>

    </div>

</div>

<script type="text/javascript">

    window.onload = function () {

        var oDiv = document.getElementById('scroll');

        var oUl = oDiv.getElementsByTagName('ul')[0];

        var aLi = oDiv.getElementsByTagName('li');

        var aBtn = oDiv.getElementsByTagName('a');

        var speed = -1;

        var timer = null;

        oUl.innerHTML += oUl.innerHTML;

        oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

        timer = setInterval(function () {

            oUloUl.style.left = oUl.offsetLeft + speed + 'px';

            if (oUl.offsetLeft < -oUl.offsetWidth / 2) {

                oUl.style.left = '0';

            } else if (oUl.offsetLeft > 0) {

                oUl.style.left = -oUl.offsetWidth / 2 + 'px';

            }

        }, 30);

        aBtn[0].onclick = function () {

            speed = -1;

        };

        aBtn[1].onclick = function () {

            speed = 1;

        };

        oUl.onmouseover = function () {

            clearInterval(timer);

        };

        oUl.onmouseout = function () {

            timer = setInterval(function () {

                oUloUl.style.left = oUl.offsetLeft + speed + 'px';

                if (oUl.offsetLeft < -oUl.offsetWidth / 2) {

                    oUl.style.left = '0';

                } else if (oUl.offsetLeft > 0) {

                    oUl.style.left = -oUl.offsetWidth / 2 + 'px';

                }

            }, 30);

        };

    };

</script>

</body>

</html>

css代码：

@charset "utf-8";

/* CSS Document */

* {

    margin: 0;

    padding: 0;

    list-style-type: none;

    font-family: "微软雅黑";

}

.case {

    width: 1140px;

    overflow: hidden;

    margin: auto;

}

#scroll {

    width: 1140px;

    height: 300px;

    position: relative;

    overflow: hidden;

}

#scroll .content {

    width: 1140px;

    height: 300px;

    position: relative;

    overflow: hidden;

    margin: 0 auto;

}

#scroll ul {

    width: 2280px;

    position: absolute;

}

#scroll li {

    float: left;

    width: 330px;

    text-align: center;

    height: 300px;

    line-height: 300px;

    margin-right: 50px;

    font-size: 20px;

    color: #666;

    font-style: italic;

    background-color: #cfcfcf;

}

以上就是我整理的两组li向左滚动的代码，希望对大家提高工作效率有所帮助。

本文标签：，您可以阅读与「」相关的所有文章

魏义齐全栈技术交流：