码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 实现无缝滚动

时间:2018-09-27 10:36:30      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:pen   end   over   appendto   mat   overflow   function   rip   cti   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
    ul,
    li {
      margin: 0;
      padding: 0;
    }
    .content { 
      width: 1020px;
      height: 60px;
      overflow: hidden; 
      border: #4e83c2 solid 1px; 
      margin:50px auto;
    }
    .content ul{
      display: flex;
      flex-direction: row;
      width: 100%; 
      overflow: hidden;
    }
    .content ul li {
      width: 400px; 
      height:80px;
      margin: 20px;
      list-style: none;
    }

</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>
</ul>
</div>
</body>
</html>
<script>
  window.onload = function () {
    function scroll(){
    $(".content ul").animate({"margin-left":"-300px"},function(){
        $(".content ul li:eq(0)").appendTo($(".content ul"))
        $(".content ul").css({"margin-left":0})
    })
    }
      setInterval(scroll,2000)
  }
</script>

jQuery 实现无缝滚动

标签:pen   end   over   appendto   mat   overflow   function   rip   cti   

原文地址:https://www.cnblogs.com/muqiao/p/9711211.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!