本文实例讲述了原生JavaScript实现的无缝滚动功能。分享给大家供大家参考，具体如下：

无缝轮播（原生JavaScript）

一：HTML部分：

<div class="box" >
  <ul class="J_XSlide list">
    <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/1.jpg" alt="广告一" /></a></li>
    <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/2.jpg" alt="广告一" /></a></li>
    <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/3.jpg" alt="广告二" /></a></li>
    <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/4.jpg" alt="广告三" /></a></li>
    <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/5.jpg" alt="广告四" /></a></li>
    <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/6.jpg" alt="广告五" /></a></li>
    <li class="J_tabContent"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="img/main/display/1.jpg" alt="广告一" /></a></li>
  </ul>
  <div class="btn btnl"><</div>
  <div class="btn btnr">></div>
  <ul class="tabs">
    <li class="tab cur"></li>
    <li class="tab"></li>
    <li class="tab"></li>
    <li class="tab"></li>
    <li class="tab"></li>
    <li class="tab"></li>
  </ul>
</div>

二、CSS部分

<style>
  * {
    margin: 0;
    padding: 0;
  }
  ul li {
    list-style: none;
  }
  .clearfix {
    zoom: 1;
  }
  .clearfix:after {
    display: block;
    clear: both;
    content: '';
  }
  .box {
    width: 1226px;
    height: 460px;
    overflow: hidden;
    position: relative;
    margin: 20px auto 0;
  }
  .box .list {
    position: relative;
    left: 0;
    height: 460px;
  }
  .box .list li img,
  .box .list li {
    float: left;
    width: 1226px;
    height: 460px;
  }
  .box .tabs {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 99999;
   }
  .box .tabs .tab {
    float: left;
    width: 6px;
    height: 6px;
    border: 2px solid #f47500;
    border-radius: 100%;
    margin-right: 10px;
    cursor: pointer;
    background: #fcf2cf;
    font-family: arial;
  }
  .box .tabs .tab:hover,
  .box .tabs .cur {
    border: 2px solid #1227e4;
    background: #26c776;
  }
  .box .btn {
    position: absolute;
    width: 30px;
    height: 70px;
    top: 50%;
    margin-top: -35px;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 70px;
  }
  .box:hover .btn {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .box .btnl {
    left: 10px;
  }
  .box .btnr {
    right: 10px;
  }
</style>