制造无限轮播，最后一张后滑出第一张

最新推荐文章于 2023-04-13 12:36:33 发布

weixin_30299539

最新推荐文章于 2023-04-13 12:36:33 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/youmingyu/p/7611413.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body{
            font-weight:bold;">black;
        }
        #box{
            width: 1200px;
            height: 300px;
            margin: 200px auto;
        }
        #box>.box{
            width: 1200px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }
        #box>.box>ul{
            position: absolute;
            width: 1000000%;
        }
        #box>.box>ul>li{
            float: left;
        }
        #box>.box>ul>li>img{
            width: 400px;
            height: 300px;
        }
        #box>.kong{
            display: none;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="box">
        <ul id="ul">
            <li><img src="../罗网.jpg" alt=""></li>
            <li><img src="../一.jpg" alt=""></li>
            <li><img src="../天.jpg" alt=""></li>
            <li><img src="../天下.jpg" alt=""></li>
            <li><img src="../弄玉.jpg" alt=""></li>
            <li><img src="../鬼谷.jpg" alt=""></li>
            <li><img src="../照片.jpg" alt=""></li>
            <li><img src="../弄玉.jpg" alt=""></li>
        </ul>
    </div>

    <!--构造一个待复制的图片组-->
    <div class="kong">
        <ul id="kl">
            <li><img src="../罗网.jpg" alt=""></li>
            <li><img src="../一.jpg" alt=""></li>
            <li><img src="../天.jpg" alt=""></li>
            <li><img src="../天下.jpg" alt=""></li>
            <li><img src="../弄玉.jpg" alt=""></li>
            <li><img src="../鬼谷.jpg" alt=""></li>
            <li><img src="../照片.jpg" alt=""></li>
            <li><img src="../弄玉.jpg" alt=""></li>
        </ul>
    </div>
</div>

<script>
    window.οnlοad=function(){
        var ul=document.getElementById("ul");
        var kl=document.getElementById("kl");
        var kls=kl.getElementsByTagName("li");
        var i= 0,w=400;
        var timer=setInterval(fn,2000);
        var lis=ul.getElementsByTagName("li");
        function fn(){


                i++;
                animated(ul,-i*w);
                console.log(lis);
//克隆待复制的节点放到轮播组里面
                ul.appendChild(kls[i%8].cloneNode(true));

        }



        function animated(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = 3;
                step = obj.offsetLeft < target ? step : -step;
                if (Math.abs(obj.offsetLeft - target) > Math.abs(step)) {
                    obj.style.left = obj.offsetLeft + step + "px";
                } else {
                    obj.style.left = target + "px";
                    clearInterval(obj.timer);
                }
            }, 5);
        }
    };

</script>
</body>
</html>

转载于:https://www.cnblogs.com/youmingyu/p/7611413.html

weixin_30299539

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制造无限轮播，最后一张后滑出第一张

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ box-sizing: border-box; mar...
复制链接

扫一扫