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>

  • 相关阅读:
    ArtTmeplate模板+取结接口
    取接口
    ionic 基本布局
    angular通过路由实现跳转 resource加载数据
    总结
    JSON和JSONP
    js中sort()方法的用法,参数以及排序原理
    计算机语言的发展史
    Jquery+PHP实现简单的前后台数据交互实现注册登录,添加留言功能
    Jquery回调函数应用实例解析
  • 原文地址:https://www.cnblogs.com/zhouyx/p/4667809.html
Copyright © 2011-2022 走看看