jquery实现简单的无缝滚动

前端技术 2023/09/08 JavaScript

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

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

本文地址：https://www.stayed.cn/item/21367

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案