js实现图片翻转效果

练习使用js 代码

 

代码展示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>图片向上翻滚效果</title>
    <style type="text/css">
        .father{
            position:relative;
            overflow:hidden;
            height:100px;
            width:300px;
            }
        .box item{
            float: left;
            font-size: 12px;
            width: 80px;
            height: 120px;
            overflow: hidden;
            position:absolute;
        }
    </style>
    <script language="javascript" type="text/javascript">
        var t;
        window.onload = function(){
            var o = document.getElementById('box');
            t = window.setInterval(function(){
                scrollup(o, 24, 0);
            }, 3000)
        }
        ///滚动主方法
        ///参数:o 滚动块对象
        ///参数:d 每次滚屏高度
        ///参数:c 当前已滚动高度
        function scrollup(o, d, c){
            if (d == (c - 78 )) {
                var t = getFirstChild(o.firstChild).cloneNode(true);
                o.removeChild(getFirstChild(o.firstChild));
                o.appendChild(t);
                t.style.marginTop = "0px";
            }
            else {
                c += 1;
                getFirstChild(o.firstChild).style.marginTop = -c + "px";
                window.setTimeout(function(){
                    scrollup(o, d, c)
                }, 15);
            }
        }
        //解决firefox下会将空格回车作为节点的问题
        function getFirstChild(node){
            while (node.nodeType != 1) {
                node = node.nextSibling;
            }
            return node;
        }
    </script>
</head>
<body>
<hr>
<div class="father">
    <div class="box">
        <div class="item">
            <img src="images/2.jpg"/>
        </div>
        <div class="item">
            <img src="images/4.jpg"/>
        </div>
        <div class="item">
            <img src="images/6.jpg"/>
        </div>
    </div>
</div>
</body>
</html>

 

 

编写体会：对function函数不熟悉，对匿名函数运用不熟练。

posted @ 2022-03-30 22:04  kuaiquxie  阅读(305)  评论(0)    收藏  举报