JS运动 - 无缝滚动和缓动动画

无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 600px;
            height: 200px;
            background: red;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        ul {
            list-style: none;
            /*font-size: 0;*/ /* 清除图片之间的间距之方法一 */
            width: 1000%;
            position: absolute;
            left: 0;
            top: 0;
        }
        li {
            float: left;
        }
        li img {
            vertical-align: bottom; /* 清除图片之间的间距之方法二 */
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="images/scroll01.jpg" alt=""></li>
            <li><img src="images/scroll02.jpg" alt=""></li>
            <li><img src="images/scroll03.jpg" alt=""></li>
            <li><img src="images/scroll04.jpg" alt=""></li>
            <li><img src="images/scroll01.jpg" alt=""></li>
            <li><img src="images/scroll02.jpg" alt=""></li>
            <li><img src="images/scroll03.jpg" alt=""></li>
            <li><img src="images/scroll04.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

JS

<script>
    window.onload = function () {
        var ul = document.getElementsByTagName("ul")[0];
        var offsetX = 0;
        var timer = null;
        timer = setInterval(scrollDidScroll,10);
        function scrollDidScroll() {
            offsetX--;
            offsetX = offsetX < -1200 ? 0 : offsetX;
            ul.style.left = offsetX + "px";
            console.log(offsetX);
        }
        ul.onmouseover = function () {
            clearInterval(timer);
        }
        ul.onmouseout = function () {
            timer = setInterval(scrollDidScroll,10);
        }
    }
</script>

效果图

缓动动画(减速运动)原理 : 记住公式

假如:初始值 leader = 0; 目标值 target = 400; speed = 10;公式如下
leader = leader + (target - leader) / speed;

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 10px;
        }
        ul, ol {
            list-style: none;
        }
        .box {
            width: 490px;
            height: 170px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .box ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 800%;
            height: 100%;
        }
        .box ul li {
            width: 490px;
            float: left;
        }
        .box ol {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -40px;
            text-align: center;
        }
        .box ol li {
            width: 15px;
            height: 15px;
            line-height: 15px;
            float: left;
            background-color: #cccccc;
            color: #ffffff;
            margin-left: 10px;
            cursor: pointer;
        }
        .box .current {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul id="scrollJS">
            <li><img src="0329images/01.jpg" alt=""></li>
            <li><img src="0329images/02.jpg" alt=""></li>
            <li><img src="0329images/03.jpg" alt=""></li>
            <li><img src="0329images/04.jpg" alt=""></li>
        </ul>
        <ol id="olJS">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</body>
</html>

JS

<script>
    window.onload = function () {
        var width = 490;
        var timer = null;
        var leader = 0;
        var scroll = document.getElementById("scrollJS");
        var lis = document.getElementById("olJS").children;
        for (var i=0;i<lis.length;i++) {
            lis[i].index = i;
            lis[i].onmouseover = function () {
                clearInterval(timer);
                for (var j=0;j<lis.length;j++) {
                    lis[j].className = "";
                }
                this.className = "current";
                var target = -this.index * width;
                timer = setInterval(function () {

                    leader = leader + (target - leader) / 10;
                    scroll.style.left = leader + "px";
                },30);
            }
        }
    }
</script>

效果图

来源：https://www.cnblogs.com/gchlcc/p/6653893.html

标签

动画