将 HTML 表格制作为幻灯片/轮播

make HTML table as a slideshow/carousel

本文关键字：幻灯片 轮播 HTML 表格      更新时间：2023-09-26

我有一个html表格，我正在使用java脚本填充它。 该表有 10 个单元格。我想将表格制作为轮播，以便显示前 5 个单元格，然后用户可以移动到接下来的 5 个单元格。我尝试在互联网上查找，但我所有的搜索都指向插件。我不想使用插件，因为我正在学习JavaScript。

我的表代码如下所示： <div> <table id="daily_forecast"> <tr id="time"> <td id="time0"> <td id="time1"> <td id="time2"> <td id="time3"> <td id="time4"> <td id="time5"> <td id="time6"> <td id="time7"> <td id="time8"> <td id="time9"> </tr> <tr id="temp"> <td id="temp0"> <td id="temp1"> <td id="temp2"> <td id="temp3"> <td id="temp4"> <td id="temp5"> <td id="temp6"> <td id="temp7"> <td id="temp8"> <td id="temp9"> </tr> </table>

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

请为我提供一些资源，以将此表制作为轮播或一些解决方案。

这至少可以让您入门（我假设水平移动）。通常，轮播是div 中的div，外部div 充当视口/窗口，仅显示内部div 的所需部分。然后，您可以快速移动内部div 以响应某些按钮或按键。

.CSS 

.outerWrap, .innerWrap {
    position: relative;
}
.outerWrap {
    overflow: hidden;
}

.HTML

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

爪哇语

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

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

相关文章：