无缝轮播点击开始 

<!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:100px;height:200px;position:relative;margin: 10px auto;overflow: hidden;-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;
    }
    </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 oUp=document.getElementById('btn1');
        var oDown=document.getElementById('btn2');
        var timer=null;
        var iSpeed=0;

        oUl.innerHTML+=oUl.innerHTML;

        oUp.onmousedown=function(){
            timer=setInterval(doMove,30);
            iSpeed=-2;
            oUp.style.cssText="-webkit-transform:translate(10px，10px);transform:translate(10px,10px);-moz-box-shadow: 0px 0px 5px #888888;box-shadow: 0px 0px 5px #888888;"
        }
        oUp.onmouseup=function(){
            clearInterval(timer);
            oUp.style.cssText="-webkit-transform:translate(0px，0px);transform:translate(0px,0px);-moz-box-shadow: 10px 10px 5px #888888;box-shadow: 10px 10px 5px #888888;"
        }

        oDown.onmousedown=function(){
            timer=setInterval(doMove,30);
            iSpeed=2;
            oDown.style.cssText="-webkit-transform:translate(10px，10px);transform:translate(10px,10px);-moz-box-shadow: 0px 0px 5px #888888;box-shadow: 0px 0px 5px #888888;"
        }
        oDown.onmouseup=function(){
            clearInterval(timer);
            oDown.style.cssText="-webkit-transform:translate(0px，0px);transform:translate(0px,0px);-moz-box-shadow: 10px 10px 5px #888888;box-shadow: 10px 10px 5px #888888;"
        }

        function doMove(){
            oUl.style.top=oUl.offsetTop+iSpeed+'px';
            if(oUl.offsetTop<-oUl.offsetHeight/2){
                oUl.style.top='0px';
            }else if(oUl.offsetTop>0){
                oUl.style.top=-oUl.offsetHeight/2+'px';
            }
        }

        oDiv.onmouseover=function(){
            timer=setInterval(doMove,30);
            iSpeed=2;
        }
        oDiv.onmouseout=function(){
            clearInterval(timer);
        }

    }
    </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-19 14:52  Mr_W_Blog  阅读(189)  评论(0)    收藏  举报