第一步:使用repeater绑定一个table。
1 <table width="530" id="rollBar"> 2 <asp:Repeater ID="rptForYou" runat="server"> 3 <ItemTemplate> 4 <tr> 5 <td width="100" height="45"> 6 <div class="list bgcolor_f3 margin_10b tc"><%#Eval("Province") %></div> 7 </td> 8 <td width="100"> 9 <div class="list bgcolor_f3 margin_10b tc"><%#Eval("City") %></div> 10 </td> 11 <td width="100"> 12 <div class="list bgcolor_f3 margin_10b tc"><%#Eval("District") %></div> 13 </td> 14 <td width="290"> 15 <div class="list bgcolor_f3 margin_10b padding_10l"><%#GetShowCompanyName(Eval("CompanyName"),Eval("MasterName")) %></div> 16 </td> 17 </tr> 18 </ItemTemplate> 19 </asp:Repeater> 20 21 </table>
第二步:jquery实现特效。
<script type="text/javascript"> function TimeCount() { $("#rollBar tr").first().remove().appendTo("#rollBar"); $("#rollBar tr:lt(7)").show(); $("#rollBar tr:gt(6)").hide(); } var t; window.onload = function () { $("#rollBar tr:lt(7)").show(); $("#rollBar tr:gt(6)").hide(); t= setInterval(TimeCount, 1000); $("#rollBar").hover(function(){ clearInterval(t); $("#rollBar tr:lt(7)").show(); $("#rollBar tr:gt(6)").hide(); },function(){ t= setInterval(TimeCount, 1000); }); } </script>