无缝滚动

思路：

　　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>

 

　　

posted @ 2016-09-03 15:55  浅遇~暖爱  阅读(131)  评论(0)    收藏  举报