jquery实现简单的无缝滚动

时间：2021-05-26

jquery实现简单的无缝滚动

<!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是滚动的速度，可以自己调整

以上所述就是本文的全部内容了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章