tween.js下面的轮播（饿了么点餐的那种效果）

程序员国曼技术 2022年11月7日

0 收藏 588 点赞 547 浏览 1118 个字

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * {
            margin:0px;
            padding:0px;
        }
        #wrap {
            width:200px;
            height:200px;
            position:absolute;
            overflow:hidden;
        }
        #ul_box {
            width:800px;
            height:200px;
            position:absolute;
            list-style-type:none;
        }
        li {
            float:left;
        }
        img {
            width:200px;
        }
    </style>
</head>
<script src="tween.js"></script>
<body>
    <div id="wrap">
        <ul id="ul_box">
            <li class="item">
                <img src="89948850c0b9d07866e026dfe6c6e7d7.jpg" /> </li>
            <li class="item">
                <img src="98ad3f445b051290c49c09a63bfb6e36.jpg" /> </li>
            <li class="item">
                <img src="aac3722ea3b9c114028d6f9efa8fccdf.jpg" /> </li>
            <li class="item">
                <img src="89948850c0b9d07866e026dfe6c6e7d7.jpg" /> </li>
        </ul>
    </div>
    <script>        var myUl= document.getElementById("ul_box");
        var myLi = document.getElementsByClassName("item");
        var t = 0;
        var b = 0;//初始位置
        var c = -200;
        var d = 1000;
        function lunbo() {
            function run() {
                t += 1;
                myUl.style.left = Tween.Bounce.easeInOut(t, b, c, d) + "px";
                if (t == d) {
                    clearInterval(timer);
                    t = 0;
                    b -= 200;
                }
                if (myUl.offsetLeft <-600) {
                    myUl.style.left = "0px";
                    b = 0;
                }            }
            var timer = setInterval(run, 10);
        }
        var bo = setInterval(lunbo, 4000);
    </script>
</body>
</html>