JS做一个接近无限时长的滚动条

最近公司需要做一个页面，需求是现代化，所以现代化最接近的应该就是动态界面了，因此在内容横栏上面花了心思，一开始按网上的是只能滚动一少点时间，直接加body也影响代码美观，所以结合了一些方法来实现了这一整个滚动栏目并实现较少内容也可以长时间的滚动。

1、首先滚动方法

function scrolltoleft() {

            sm.scrollLeft++;

            if (sm.scrollLeft <= Pic1.scrollWidth)

                sm.scrollLeft++;

        }

2、其次，滚动方法的滚动速率

var MyMar = setInterval(scrolltoleft, 15);

3、如果想要鼠标浮动图片放大放小效果，加个强制更改本体大小响应方法

function mouseover(x) {

            x.style.width = "180";

            x.style.height = "225";

            x.style.cursor = "pointer"

}

function mouseout(x) {

            x.style.width = "120";

            x.style.height = "140"

}

4、鼠标浮动停留于图片上方停止图片动效，停留移出后继续恢复滚动

sm.onmouseover = function () {

            clearInterval(MyMar);

 }

sm.onmouseout = function () {

            MyMar = setInterval(scrolltoleft, 20);

}

*重点important：循环生成隐藏table并赋值每一个隐藏table的body数据

 function addTr() {

            var Tab = document.getElementById("Tab");

            var tabletd = new Array(100);

            for (var i = 2; i <= 39; i++) {

                var aid = $("#Pic" + i)

                tabletd = document.createElement("td");

                var bid = String("Pic" + i);

                // 先赋值一个Pic方便后面td[id^="Pic"]

                tabletd.id = bid;

                //console.log($("#Pic" + i));

                //console.log("id" + tabletd.id);

                Tab.appendChild(tabletd);

                //循环查找每一个生成的id

                $("#Tab").find('td[id^="Pic"]').each(function (i) {

                    this.id = "Pic" + (i + 1);

                });

       //调用页面赋值方法

                runadd()

            }

        }

        addTr()

 

        function runadd() {

            for (var i = 2; i <= 39; i++) {

                // var wantpic ="Pic"+i;

                $("#Pic" + i).html(Pic1.innerHTML).innerHTML = Pic1.innerHTML;

            }

       //将最初的显示table隐藏起来不然后面生成的是和它不在同一行，也可以设置为同一行但这样直接隐藏比较快速解决。

            document.getElementById("Pic1").style.display = "none";

            document.getElementById("Pic1").style.visibility = "hidden";

        }