萬盛學電腦網 >> 腳本專題 >> javascript >> jquery實現簡單的無縫滾動
jquery實現簡單的無縫滾動
jquery實現簡單的無縫滾動
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> </head> <style> *{ margin: 0px; padding: 0px;} li{ list-style: none;} .content{ width: 1020px; height:112px; overflow: hidden; border: #4e83c2 solid 1px; margin:50px auto; } .content ul{ width: 1020px; height:100px;} .content ul li{ float: left; width: 100px; height: 100px; border:#ccc solid 1px; display: block; margin: 5px;} </style> <body> <div class="content"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> </ul> </div> <script> function scroll(){ $(".content ul").animate({"margin-left":"-110px"},function(){ $(".content ul li:eq(0)").appendTo($(".content ul")) $(".content ul").css({"margin-left":0}) }) } setInterval(scroll,1000) </script> </body> </html>scroll()用法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function scroll(){ $(".content ul").animate({"margin-left":"-110px"},function(){ //這個是讓整個ul先向前滑動個li ,如果要一次性滑動5個~那麼就是550px. //想向上滾動就改成 $(".content ul").animate({"margin-top":"-105px"} //想向下滾動就改成 $(".content ul").animate({"margin-top":"105px"} //想向右滾動就改成 $(".content ul").animate({"margin-left":"110px"} $(".content ul li:eq(0)").appendTo($(".content ul")) $(".content ul").css({"margin-left":0}) //對應這的這邊 //想向上滾動就改成 $(".content ul").animate({"margin-top":0} //想向下滾動就改成 $(".content ul").animate({"margin-top":0} //想向右滾動就改成 $(".content ul").animate({"margin-left":0} }) } setInterval(scroll,1000) //這上面的是1000是滾動的速度，可以自己調整javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved