js实现走马灯效果（无缝衔接）

最新推荐文章于 2024-08-04 12:47:40 发布

normol

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量3w

点赞数 2

分类专栏： javascript 文章标签： javascript 走马灯

本文链接：https://blog.csdn.net/normol/article/details/77841438

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

需要注意的是，scrollLeft属性只有当他内部元素超出父级元素时才有效，否则将一直为0，
可以将scrollLeft想象成有横向的滚动条，
而scrollLeft++则相当于将滚动条向右拖动，当拖动到展示内容实际宽度后（需要另一个与展示内容相同的区域，否则一轮左移完成后会出现留白），需要恢复为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
    <style type="text/css">
    .tt {
    width: 145px;
    height: 106px;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 10px;
    display: block;
    float: 
    }

    </style>
</head>
<body>

    <div id="colee_left" style="width: 1050px;height: 150px;border:1px solid #e8e8e8;margin-top: 10px;overflow: hidden;background-color:yellow;">
        <table cellpadding="0">
            <tbody>
                <tr>
                    <td id="colee_left1" valign="top">
                        <table>
                            <tbody>
                                <tr align="center">
                                    <td>
                                        <a href="#">
                                            <img class="tt" src="1.jpg"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <img class="tt" src="1.jpg"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <img class="tt" src="1.jpg"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <img class="tt" src="1.jpg"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <img class="tt" src="1.jpg"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <img class="tt" src="1.jpg"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <img class="tt" src="1.jpg"/>
                                        </a>
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td id="colee_left2" valign="top">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script type="text/javascript">
    var speed = 30;
    //速度数值越大速度越慢
    var colee_left2 = document.getElementById("colee_left2");
    var colee_left1 = document.getElementById("colee_left1");
    var colee_left = document.getElementById("colee_left");
    colee_left2.innerHTML = colee_left1.innerHTML;
    function Marquee3() {
            if (colee_left2.offsetWidth - colee_left.scrollLeft <= 0){//offsetWidth 是对象的可见宽度
                    colee_left.scrollLeft -= colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
        }
        else {
            colee_left.scrollLeft++;
        }

    }
    var MyMar3 = setInterval(Marquee3, speed);
</script>
</html>