jquery實現(xiàn)簡單的無縫滾動
<!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()用法：
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是滾動的速度，可以自己調整以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
