多图片滚动

最新推荐文章于 2022-06-19 17:16:10 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2022-06-19 17:16:10 发布

阅读量801

点赞数

分类专栏： JavaScript积跬步至千里

本文链接：https://blog.csdn.net/wstpa/article/details/45457473

版权

JavaScript积跬步至千里专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {margin:0;padding: 0}
    ul {list-style: none;}
    img {border: none;outline: none;display: block;}
    ul {width: 720px;height: 690px}
    ul li {width: 220px;height: 210px;float: left;margin-right:10px;display: inline;position: relative;overflow: hidden;}
    ul li div {width: 220px;height: 210px;position: absolute;left: 10px;top: 0px;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var aDiv=document.getElementsByTagName('div');

        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].step=-4;
            doMove(aDiv[i]);
        };
        function doMove(obj,iSpeed){

            setTimeout(function(){
                var timer=setInterval(function(){

                    obj.style.top=parseInt(getStyle(obj,'top'))+obj.step+'px';

                    if (parseInt(getStyle(obj,'top')) < -210) {  //写在29行上面，只能向上运动，下不来了。
                        obj.style.top = '-210px';
                    }else if(parseInt(getStyle(obj,'top')) > 0){
                        obj.style.top = '0px';
                    };

                    if (parseInt(getStyle(obj,'top'))==-210) {
                        clearInterval(timer);
                        obj.step=4;
                        doMove(obj)
                    }else if(parseInt(getStyle(obj,'top'))==0){
                        clearInterval(timer);
                        obj.step=-4;
                        doMove(obj)
                    };
                },30)

            },Math.floor(Math.random()*9)*1000)
        }
    }
    function getStyle(obj,attr){
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
    }
    </script>
</head>
<body>
    <ul>
        <li>
            <div>
                <img src="img/1.jpg">
                <img src="img/2.jpg">
            </div>
        </li>
        <li>
            <div>
                <img src="img/3.jpg">
                <img src="img/4.jpg">
            </div>
        </li>
        <li>
            <div>
                <img src="img/5.jpg">
                <img src="img/6.jpg">
            </div>
        </li>

    </ul>
</body>
</html>

见面时的呼吸都曾反复练习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多图片滚动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin:0;padding: 0} ul {list-style: none;} img {border: none;o
复制链接

扫一扫