zoukankan      html  css  js  c++  java
  • 无缝滚动

    思路:

      1、首先设置ul里面的图片一共8张:ul.innerHTML+=ul.innerHTML

      2、计算ul的实际宽度:ul.style.width = li[0].offsetWidth *li.length +'px'

      3、

    代码如下:

      

    <!DOCTYPE html>
    <html>
    <head>
        <title>无缝滚动</title>
        <meta charset="utf-8"/>
        <style type="text/css">
           *{
                padding: 0px;
                margin: 0px;
            }
            .main{
                width: 1200px;
                height: 200px;
                margin: 50px auto;
                position: relative;
                overflow: hidden;
            }
            ul{
                list-style: none;
                position: absolute;
                top:0px;
                left: 0px;
                overflow: hidden;
            }
            ul li{
                width: 300px;
                float: left;
            }
            </style>
    </head>
    <body>
            <div class="main">
            <ul>
                <li>
                    <img src="img/11.jpg" width="100%">
                </li>
                <li>
                    <img src="img/22.jpg" width="100%">
                </li>
                <li>
                    <img src="img/33.jpg" width="100%">
                </li>
                <li>
                    <img src="img/44.jpg" width="100%">
                </li>
            </ul>
        </div>
    </body>
        <script type="text/javascript">
            var div = document.querySelector('.main');
            var ul = document.querySelector('ul');
            var li = document.getElementsByTagName('li');
            var speed = -2;
            ul.innerHTML +=ul.innerHTML;
            ul.style.width = li[0].offsetWidth*li.length +'px';
            var timer = setInterval(move,30);
            function move(){
                if (Number(ul.style.left) < -ul.offsetWidth/2) {
                    ul.style.left = '0';
                }else if (ul.offsetLeft >0) {
                    ul.style.left = -ul.offsetWidth/2 +'px';
                }
                ul.style.left = ul.offsetLeft + speed +'px';
            }
            div.onmouseover = function(){
                clearInterval(timer);
            }
            div.onmouseout = function(){
                timer = setInterval(move,30);
                speed = 2;
            }
        </script>
    
    </html>  

      

  • 相关阅读:
    centos crash debug
    go get Unknown SSL protocol error in connection to gopkg.in
    Tensorflow serving with Kubernetes
    Spring 集成 Swagger UI
    Docker Registry V2 Garbage Collection
    Docker Registry V2 with Nginx
    Zabbix磁盘性能监控
    Zabbix CPU utilization监控参数
    Windows挂载Gluster复制卷
    Redis持久化存储(三)
  • 原文地址:https://www.cnblogs.com/lin-f/p/5837292.html
Copyright © 2011-2022 走看看