html结构：
1 <div class="top"> 2 <h1>一元传奇</h1> 3 <div class="area"> 4 <ul> 5 <li>1</li> 6 <li>2</li> 7 <li>3</li> 8 <li>4</li> 9 <li>5</li> 10 <li>6</li> 11 <li>7</li> 12 <li>8</li> 13 <li>9</li> 14 <li>10</li> 15 <li>11</li> 16 <li>12</li> 17 <li>13</li> 18 <li>14</li> 19 <li>15</li> 20 <li>16</li> 21 <li>17</li> 22 <li>18</li> 23 <li>19</li> 24 <li>20</li> 25 </ul> 26 </div> 27 </div>
css结构：
1 <style type="text/css"> 2 html,body,ul,ol,li{ 3 margin: 0; 4 padding: 0; 5 } 6 .top{ 7 position: relative; 8 width: 300px; 9 height: auto; 10 } 11 .top>h1{ 12 background-color: #898989; 13 margin: 0; 14 line-height: 30px; 15 font-size: 16px; 16 color: #fff; 17 padding: 5px; 18 } 19 .top>.area{ 20 position: relative; 21 overflow: hidden; 22 width: 100%; 23 height: 500px; 24 } 25 .area>ul{ 26 position: absolute; 27 width: 100%; 28 height: auto; 29 left: 0; 30 top: 0; 31 } 32 .area>ul>li{ 33 width: 100%; 34 height: 50px; 35 } 36 </style>
js结构：
1 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 var 5 area_ul = $('div.area>ul'), 6 area_ul_lis = $('div.area>ul>li'); 7 8 // 为。。。 9 area_ul_lis.each(function(index){ 10 var $self = $(this); 11 if(index % 2 == 0){ 12 // 偶数 13 $self.css('background-color','#cccfff'); 14 }else{ 15 // 奇数 16 $self.css('background-color','#fffccc'); 17 } 18 }); 19 20 // area_ul.before().after().append().prepend() 21 // area_ul.prepend('<li></li>').css('top','-50px'); 22 setInterval(function(){ 23 area_ul.animate({ 24 top : '-50px' 25 },500,function(){ 26 var area_ul_lis_t = $('div.area>ul>li'); 27 $(this).css('top','0').append(area_ul_lis_t.eq(0)); 28 }); 29 },1000); 30 }); 31 </script>