网页走马灯

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

走马灯是一种挺有意思的效果，其实有点像广告轮播图，就是一张张的走过去。

什么是跑马灯效果

每隔一段时间，排在首位的字符会被后一个字符所代替，而首位字符会被移到队尾。

实现

1.首先准备几个盒子，让他们排着

  <td>
                                        <a href="#">
                                            <img class="tt" src="https://t8.baidu.com/it/u=2742018111,1553564989&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=61D1A366DBA5835B027D790F030090C9&sec=1664211600&t=7583738d1bb42a07160d0d24cad80936"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                             <img class="tt" src="https://t8.baidu.com/it/u=2742018111,1553564989&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=61D1A366DBA5835B027D790F030090C9&sec=1664211600&t=7583738d1bb42a07160d0d24cad80936"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                            <img class="tt" src="https://t8.baidu.com/it/u=2742018111,1553564989&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=61D1A366DBA5835B027D790F030090C9&sec=1664211600&t=7583738d1bb42a07160d0d24cad80936"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                             <img class="tt" src="https://t8.baidu.com/it/u=2742018111,1553564989&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=61D1A366DBA5835B027D790F030090C9&sec=1664211600&t=7583738d1bb42a07160d0d24cad80936"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                              <img class="tt" src="https://t8.baidu.com/it/u=2742018111,1553564989&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=61D1A366DBA5835B027D790F030090C9&sec=1664211600&t=7583738d1bb42a07160d0d24cad80936"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                             <img class="tt" src="https://t8.baidu.com/it/u=2742018111,1553564989&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=61D1A366DBA5835B027D790F030090C9&sec=1664211600&t=7583738d1bb42a07160d0d24cad80936"/>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="#">
                                             <img class="tt" src="https://t8.baidu.com/it/u=2742018111,1553564989&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=61D1A366DBA5835B027D790F030090C9&sec=1664211600&t=7583738d1bb42a07160d0d24cad80936"/>
                                        </a>
                                    </td>

2.然后开启一段定时器，去定时执行js代码，在js代码

 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);

效果