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

来源：互联网发布：股票数据api接口编辑：程序博客网时间：2024/04/30 22:32

需要注意的是，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>

阅读全文

0 0