zoukankan      html  css  js  c++  java
  • 兼容IE7以上的无缝滚动,带箭头、停顿

    <!DOCTYPE HTML>
    <html>

        <head>
            <meta charset="utf-8" />
            <title>无缝滚动</title>
            <link href="">
        </head>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            a{
                cursor: pointer;
            }
            #div1 {
                 800px;
                height: 130px;
                margin:50px auto;
                position: relative;
                background: red;
                overflow: hidden;
            }
            ul {
                position: absolute;
                left: 0;
                top: 0;
            }
            li {
                float: left;
                list-style: none;
            }
            li img {
                 200px;
                height: 130px;
            }
        </style>

        <script>
             //        setInterval(function() {
             //                var oDiv=document.getElementById("div1");
             //                oDiv.style.left=oDiv.offsetLeft+10+'px';
             //        },30);
            window.onload = function() {
                var oDiv = document.getElementById('div1');
                var oUl = oDiv.getElementsByTagName('ul')[0];
                var aLi = oUl.getElementsByTagName('li');
                var speed=2;
                
                oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
                oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
                function move() {
                    if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                        oUl.style.left = '0';
                    }
                    //向左滚
                    //        oUl.style.left=oUl.offsetLeft-2+'px';
                    //向右滚
                    if (oUl.offsetLeft >0) {
                        oUl.style.left =-oUl.offsetWidth /2+'px';
                    }
                    oUl.style.left = oUl.offsetLeft + speed + 'px';
                }
                var timer=setInterval(move, 30);
                oDiv.onmouseover=function(){
                    clearInterval(timer);
                };
                oDiv.onmouseout=function(){
                    timer=setInterval(move, 30);
                };
                document.getElementsByTagName('a')[0].onclick=function(){
                    speed=-2;
                };
                document.getElementsByTagName('a')[1].onclick=function(){
                    speed=2;
                }
            }
        </script>

        <body>
        <a>向左走</a>
        <a>向右走</a>
            <div id="div1">
                <ul>
                    <li><img src="images/1.jpg" /></li>
                    <li><img src="images/2.jpg" /></li>
                    <li><img src="images/1.jpg" /></li>
                    <li><img src="images/2.jpg" /></li>
                </ul>
            </div>
        </body>

    </html>

  • 相关阅读:
    Sample XPS Documents Download
    触发器中的inserted表和deleted表
    Using freewheel.labs.autodesk.com to auto generate preview images of DWF files on your web site
    解除SQL对组件"Ad Hoc Distributed Queries"的"STATEMENT'OpenRowset OpenDatasource"的访问
    读写xps
    XPS文件,在Windows XP下的打开查看阅读和打印方法。
    Learning to Reference Inserted and Deleted Tables
    Get value from updated, inserted and deleted
    Reinstall Microsoft Helper Viewer
    如何查找文件的IFilter
  • 原文地址:https://www.cnblogs.com/zhouyx/p/4667809.html
Copyright © 2011-2022 走看看