javascript 书写无缝滚动。

╰半夏微凉° 2022-09-25 13:17 250阅读 0赞

废话少说，献上demo [ 源码][Link 1] 大家自己下载看效果。

先放上html代码：

<!DOCTYPE html>
    <html>
    	<head>
        <meta charset="UTF-8">
    	  <title>无缝滚动</title>
        <link rel="stylesheet" href="static/css/aio.css" />
    </head>
    	<body>
        <h1>无缝滚动</h1>
        <div class="btn l-btn" id="l-btn"><</div>
        <div class="btn r-btn" id="r-btn">></div>
        <div class="banner" id="banner">
          <ul class="move" id="move">
            <li><a href="#"><img src="static/images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="static/images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="static/images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="static/images/4.jpg" alt=""></a></li>
          </ul>
        </div>	
      <script type="text/javascript" src="static/js/test.js"></script>
    </body>
    </html>

接下来就是css文件对页面的格式进行了简单的布局。

/*!/css/demo.scss*/
    body{
      text-align: center;
      background-color: #FFCCFF;
    }
    .banner {
      position: relative;
      margin: 50px auto 0;
      width: 800px;
      height: 120px;
      border: 2px solid #fff;
      overflow: hidden;
    }
    
    .banner .move {
      position: absolute;
    }
    
    .banner ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 0;
    }
    
    .banner ul li {
      display: inline-block;
    }
    
    .btn {
      margin-top: 40px;
      width: 30px;
      height: 100px;
      background-color: rgba(255, 255, 255, .3);
      line-height: 100px;
      text-align: center;
      font-size: 60px;
      font-weight: bold;
      cursor: pointer;
    }
    
    .l-btn {
      float: left;
    }
    
    .r-btn {
      float: right;
    }

接下就是原生的js代码

一，首先获取到元素节点。

二，我们先申请一个speed变量，因为到后面 我们可以用它来控制速度和滚动的方向。

三，动态多创建一份li元素，这里不好解释，大家可以注释之后看代码。就能明白它的意义了。

四，为了能让oUl的宽度装下所有的oLi,所以用一个oLi的宽度去乘以oLi的length.加上px就可以了（ps:一定要加‘px’,除非宽度是0.因为style.width是个string类型）

五，在move函数里面，主要就是对位置的判断了。大家可以自己去琢磨一下。（代码无缝滚动效果的原理是：改变了div 的left值。）

我自己在写的时候，总是搞不清element.style.left 和element.offsetLeft。如果你也是一样， [请戳这里！][Link 2]

[Link 1]: http://download.csdn.net/detail/u011456552/9627311
[Link 2]: http://blog.csdn.net/u011456552/article/details/52497956