Javascript 将HTML表格制作为幻灯片/旋转木马

我有一个html表，我正在使用java脚本填充它。该表有10个单元格。我想将该表做成一个旋转木马，以便显示前5个单元格，然后用户可以移动到下5个单元格。我曾尝试在互联网上搜索，但我所有的搜索结果都指向插件。我不想使用插件，因为我正在学习javascript

我的表格代码如下所示：

而javascript wjich所填充的是

function populateTable(disp_forecast){
        var tbl=document.getElementById("daily_forecast");
                tbl.style.width  = '900px';
                tbl.style.height='200px';
                tbl.style.position="relative";
                tbl.style.left='60px';
                tbl.style.top='40px';

                tbl.style.border = '1px solid grey';

                elemrow1Id="time";
                elemrow2id="temp";
                elemrow1Id_day="day"
                var key4,key5,key6="";
                for(var i=0;i<10;i++){

                    key4=elemrow1Id.concat(i);
                    key5=elemrow2id.concat(i);
                    key6=elemrow1Id_day.concat(i);
                    var day_time=disp_forecast[key4];
                    var day_temp=disp_forecast[key5];
                    if(day_time==0){
                        var day=disp_forecast[key6];
                        day=day.toString();
                        day=day.concat('\n');
                        day=day.concat("12am");
                        document.getElementById(key4).innerHTML=day;
                        //document.getElementById(key5).innerHTML=day_temp;
                    }
                    else if(day_time>12){
                        day_time=day_time-12;
                        day_time=day_time.toString();
                        day_time=day_time.concat("pm");
                        document.getElementById(key4).innerHTML=day_time;
                        //document.getElementById(key5).innerHTML=day_temp;

                    }
                    else if(day_time==12){
                        day_time=day_time.toString();
                        day_time=day_time.concat("pm");
                        document.getElementById(key4).innerHTML=day_time;
                        //document.getElementById(key5).innerHTML=day_temp;
                    }
                    else{
                        day_time=day_time.toString();
                        day_time=day_time.concat("am");
                        document.getElementById(key4).innerHTML=day_time;
                        //document.getElementById(key5).innerHTML=day_temp;
                    }
                    document.getElementById(key5).innerHTML=day_temp;
                }
        }

函数populateTable（显示预测）{
var tbl=document.getElementById（“每日预测”）；
tbl.style.width='900px'；
tbl.style.height='200px'；
tbl.style.position=“相对”；
tbl.style.left='60px'；
tbl.style.top='40px'；
tbl.style.border='1px纯灰'；
elemrow1Id=“时间”；
elemrow2id=“临时”；
elemrow1Id_day=“day”
变量key4、key5、key6=“”；
对于（var i=0；i12）{
日时间=日时间-12；
day_time=day_time.toString（）；
day_time=day_time.concat（“下午”）；
document.getElementById（key4.innerHTML=day\u time；
//document.getElementById（key5）.innerHTML=day\u temp；
}
否则，如果（天时间==12）{
day_time=day_time.toString（）；
day_time=day_time.concat（“下午”）；
document.getElementById（key4.innerHTML=day\u time；
//document.getElementById（key5）.innerHTML=day\u temp；
}
否则{
day_time=day_time.toString（）；
day_time=day_time.concat（“上午”）；
document.getElementById（key4.innerHTML=day\u time；
//document.getElementById（key5）.innerHTML=day\u temp；
}
document.getElementById（key5）.innerHTML=day\u temp；
}
}

---

请为我提供一些资源，使此表成为旋转木马或某种解决方案。

这至少可以让您开始（我假设是水平移动）。通常，旋转木马是div中的一个div，外部div用作视口/窗口，仅显示内部div的所需部分。然后，根据一些按钮或按键，快速移动内部div

CSS

.outerWrap, .innerWrap {
    position: relative;
}

.outerWrap {
    overflow: hidden;
}

HTML

---

elem.style.left=“15px”只是将内部div向右移动一点的示例。您可能需要创建一个循环或以增量方式移动它的东西，可能是为了响应按钮、事件侦听器等。

不要将html表格用于表格数据以外的任何内容。为什么要使用表格数据管理器？使用div ul liBTA我在这里制作了一个简单/原始的旋转木马：。（这绝对不是最好的）

<div class="outerWrap">
    <div class="innerWrap">
        <table> <!-- your stuff goes here --> </table>
    </div>
</div>

var elem = document.getElementsByTagNames('innerWrap')[0];
elem.style.left = "15px";