这里给大家分享的是使用jQuery实现简单的无缝滚动的效果，其思路是我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;，有需要的小伙伴可以参考下。
jquery实现简单的无缝滚动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="https://www.jb51.net/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> <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是滚动的速度，可以自己调整
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章: