无缝滚动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
    *{margin:0;padding:0px;}
    ul li{list-style-type: none;}
    #content{width:203px;height:100px;overflow: hidden;position:relative;margin: 10px auto;overflow: hidden;border:1px solid #888888;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;}
        #div1{position: absolute;top: 0px;left: 0px;}
        #div1 li{float: left;display: block;}
        #div1 li>img{width:100px;}
    .btn{width:50px; height:50px;color:#fff;text-align:center;        line-height:50px; border:1px solid black;float: left;margin:10px; border-radius: 10px;background: #1BB9E8;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;}
    #content:hover{
        -webkit-transform:translate(10px，10px);
                transform:translate(10px,10px);
        
        -moz-box-shadow: 0px 0px 5px #888888; /* 老的 Firefox */
             box-shadow: 0px 0px 5px #888888;
    }
    .btn:hover{
        -webkit-transform:translate(10px，10px);
                transform:translate(10px,10px);
        
        -moz-box-shadow: 0px 0px 5px #888888; /* 老的 Firefox */
             box-shadow: 0px 0px 5px #888888;

    }

    </style>
    <script type="text/javascript">
    window.onload=function(){
        
        var oDiv=document.getElementById('content');
        var oUl=oDiv.getElementsByTagName('ul')[0];
        var aLi=oUl.getElementsByTagName('li');
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');

        var iSpeed=2;
        var timer=null;

        //鼠标移入改变轮播方向
        oBtn1.onmouseover=function(){
            iSpeed=2;
        }

        oBtn2.onmouseover=function(){
            iSpeed=-2;
        }


        //复制自己一份
        oUl.innerHTML+=oUl.innerHTML;

        //计算轮播ul的总宽度
        oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
        // offsetLeft//左边距
        // offsetTop//上边距
        // offsetWidth//宽度
        // offsetHeight//高度

        timer=setInterval(function(){
            oUl.style.left=oUl.offsetLeft-iSpeed+'px';
            if(oUl.offsetLeft<-oUl.offsetWidth/2){
                oUl.style.left='0px';
            }else if(oUl.offsetLeft>0){
                oUl.style.left=-oUl.offsetWidth/2+'px';
            }
        },30)

        oUl.onmouseover=function(){
            clearInterval(timer);
        }
        oUl.onmouseout=function(){
            timer=setInterval(function(){
            oUl.style.left=oUl.offsetLeft-iSpeed+'px';
            if(oUl.offsetLeft<-oUl.offsetWidth/2){
                oUl.style.left='0px';
            }else if(oUl.offsetLeft>0){
                oUl.style.left=-oUl.offsetWidth/2+'px';
            }
        },30)
        }

    }
    </script>
</head>
<body>
    <div id="content">
        <ul id="div1">
            <li><img src="img/0.png"></li>
            <li><img src="img/1.png"></li>
            <li><img src="img/2.png"></li>

        </ul>
    </div>
        <div class="btn btn1" id='btn1'>←</div>
        <div class="btn btn2" id='btn2'>→</div>
</body>
</html>

 

查看范例

posted @ 2017-01-18 17:42  Mr_W_Blog  阅读(125)  评论(0)  编辑  收藏  举报