JS--Div中数据滚动到最后一条重新从头开始滚动
在做东西时要求让数据滚动，且滚动到最后一条时，从头再开始滚动，样图如下：
在网上搜了好多资料都没法做到重新从第一条开始滚动。只是找到了如何让table滚动，但是，这个效果也不是我想要的，因为这个效果是一直滚动，无法再滚动到最后一条后再从第一条开始滚动。
代码如下：
<script type="text/javascript">
if ($("#ticker").height() > 715) { //715为DIV的高度
scroll();
}
function scroll() {
t = setInterval("show()", 1000) //1000滚动时间间隔为1秒 如要改动，下面1000也要跟着改动
$("#ticker").mouseover(function () {
clearInterval(t);
}).mouseout(function () {
t = setInterval("show()", 1000);
});
}
function show() {
$("#ticker tr:first").appendTo($("#ticker"));
}
</script>
无法达到预期效果，只能再另想办法，找资料也找不到，头疼了好久，最后想出一个办法，从table的行数上下手，先数出未滚动前的行数，赋值给sum,然后每滚动一条，sum++，当sum等于table总行数的时候，再重新刷新页面，就能达到我想要的效果了。
代码如下(数据乱添的，大家不要在意)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="/Jqwidgets/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <style type="text/css"> table{border-collapse:collapse;border-spacing:0;border-left:1px solid #000000;border-top:1px solid #000000; font-size:15px;font-weight:bold; } td{border-right:1px solid #000000;border-bottom:1px solid #000000;padding:5px 15px;} #Marquee{overflow:hidden;margin:0 auto;} </style> </head> <body > <form id="form1" runat="server"> <div id="Marquee" style="width: 80%; height: 715px"> <table id="ticker" width="100%" border="1" style="height:50px; vertical-align:middle;"> <tr style="font-weight:bold; font-size:15px; background-color:Gray"><td width="25%" style="border-right:0px;border-left:0px;">商品</td><td width="25%" style="border-right:0px;border-left:0px;">货位</td><td width="25%" style="border-right:0px;border-left:0px;">日期</td><td width="25%" style="border-left:0px;">状态</td></tr> <tr style='font-weight:bold;'><td width='25%'>大白菜 </td><td width='25%'>A1</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>青菜 </td><td width='25%'>A2</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>土豆 </td><td width='25%'>A3</td><td width='25%'>2015/6/10 </td><td width='25%'>不合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>苹果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>苹果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>嗡嗡嗡 </td><td width='25%'>A6</td><td width='25%'>2015/6/11 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>苹果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>苹果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鲜猪肉(白条) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>苹果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>里 </td><td width='25%'>a</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>里 </td><td width='25%'>a</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>里 </td><td width='25%'>a</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>里 </td><td width='25%'>a</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> </table> </div> <script type="text/javascript"> var sum = 22; //sum为未滚动前显示的行数 if ($("#ticker").height() > 715) { //715为DIV的高度 scroll(); } function scroll() { t = setInterval("show()", 1000) //1000滚动时间间隔为1秒 如要改动，下面1000也要跟着改动 $("#ticker").mouseover(function () { clearInterval(t); }).mouseout(function () { t = setInterval("show()", 1000); }); } function show() { $("#ticker tr:first").appendTo($("#ticker")); sum = sum + 1; if (sum == 35) { //35为table数据总行数 setTimeout(function () { window.location.reload(); }, 500); //500为滚动到最后一条之后0.5秒后刷新页面 } } </script> </form> </body> </html>
这是我想到的一个蠢办法，不知道大家有没有更好的，希望能够跟大家分享一下，在这里先谢谢慷慨的大侠！
