JS实例-图片上下滑动

最新推荐文章于 2021-07-28 21:14:35 发布

祥灬子

最新推荐文章于 2021-07-28 21:14:35 发布

阅读量3.1k

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_17505335/article/details/52748168

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JS练习实例-自动上下滑动图片

效果图：
图片上下滑动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            .dk{height: 540px; width: 200px; border: 1px solid red; position: relative; margin:20px auto;}
            .dk_top{height: 30px; width: 200px; background-color: coral;text-align: center;}
            .dk_bottom{height: 30px; width: 200px; background-color: coral;text-align: center;}
            ul{height: 480px; width: 200px; background-color: cornsilk; overflow: hidden;}
            ul li{list-style: none; height: 80px; width: 200px; border-bottom: 1px solid red;  line-height: 40px; text-align: center;}
            img{height: 80px; width: 200px;}
        </style>
        <script>
            window.onload = function(){
                var dk = document.getElementById("dk");
                var odiv = dk.getElementsByTagName('div');
                var oul = dk.getElementsByTagName('ul')[0];
                var ali = oul.getElementsByTagName('li');
                var timer = null;
                var i = 0;                           
                odiv[0].onclick = function (){
                    if(timer != null){
                        //停止滑动
                        clearInterval(timer);
                    }
                    timer = setInterval(function(){

                        ali[0].style.marginTop = -i+'px';

                            i++;
                            if( i == 325){
                              clearInterval(timer);
                           }
                    },30);
                }

                odiv[1].onclick = function (){
                    if(timer != null){
                        //停止滑动
                        clearInterval(timer);
                    }
                    timer = setInterval(function(){
                        ali[0].style.marginTop = -i+'px';

                            i -= 1;
                            if( i == 0){
                              clearInterval(timer);
                           }
                    },30);
                }
            }
        </script>
    </head>
    <body>
        <div class="dk" id="dk">
            <div class="dk_top">向上</div>
                <ul>
                    <li><img src="img/1.jpg"></li>
                    <li><img src="img/2.jpg"></li>
                    <li><img src="img/3.jpg"></li>
                    <li><img src="img/4.jpg"></li>
                    <li><img src="img/5.jpg"></li>
                    <li><img src="img/6.jpg"></li>
                    <li><img src="img/7.jpg"></li>
                    <li><img src="img/8.jpg"></li>
                    <li><img src="img/9.jpg"></li>
                    <li><img src="img/10.jpg"></li>
                </ul>
            <div class="dk_bottom">向下</div>
        </div>
    </body>
</html>

祥灬子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实例-图片上下滑动

JS练习实例-自动上下滑动图片效果图： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0;padding: 0;} .dk{height: 540px; width:
复制链接

扫一扫

专栏目录