无缝滚动

时间：2016-09-03 16:33:17 阅读：124 评论：0 收藏：0 [点我收藏+]

思路：

　　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>

无缝滚动

原文：http://www.cnblogs.com/lin-f/p/5837292.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)