原生js实现无缝轮播图效果

主要是利用运动轨迹的思想来进行实现
代码：
首先写一个简单的html布局

<div class="win">
   <ul>
       <li><img src="image/banner1.jpeg"></li>
       <li><img src="image/banner2.jpeg"></li>
       <li><img src="image/banner3.jpeg"></li>
       <li><img src="image/banner4.jpeg"></li>
       <li><img src="image/banner1.jpeg"></li>
   </ul>
   <div class="left">&lt;</div>
   <div class="right">&gt;</div>
   <ol>
       <li class="active"></li>
       <li></li>
       <li></li>
       <li></li>
   </ol>
</div>

基础的style样式

```css
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .win {
        width: 799px;
        height: 300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .left,
    .right {
        width: 40px;
        height: 40px;
        background-color: white;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        top: 35%;
        position: absolute;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }

    ol li {
        width: 30px;
        height: 10px;
        float: left;
        margin-right: 10px;
        background-color: white;
    }

    ol {
        width: 160px;
        height: 20px;
        position: absolute;
        bottom: 5px;
        left: 50%;
        margin-left: -80px;
    }

    ul li {
        width: 799px;
        height: 300px;
        float: left;
    }

    ul {
        height: 300px;
        width: 7995px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .active {
        background-color: red;
    }
</style>

js实现逻辑

```javascript
var left = document.querySelector(".left"),
            right = document.querySelector(".right"),
            imgWidth = document.querySelector(".win").offsetWidth,
            ul = document.querySelector("ul"),
            list = document.querySelectorAll("ol li"),
            index = 0,
            time,
            indexTime,
            win = document.querySelector(".win");
        // 点击右边按钮
        right.onclick = function () {
            // index 判断走几张图
            if (index == 4) {
                index = 0;
                // 位置也要回归到第1张图的位置
                ul.style.left = "0px";
            }
            index++
            speed()
            console.log("ul的left=" + ul.offsetLeft);
            console.log("要走的距离=" + -index * imgWidth);
        }
        // 点击左边按钮
        left.onclick = function () {
            if (index == 0) {
                index = 4
                // 位置也要到第5张图的位置
                ul.style.left = "-920px";
            }
            index--;
            speed()
        }


        // 运动函数
        function speed() {
            clearInterval(time);
            // 停止定时器，避免动画重复
            time = setInterval(function () {
                // 每一次保证走1张图，分成10小份 
                var motion = (-index * imgWidth - ul.offsetLeft) / 10;
                // -index * imgWidth 要走几张图的距离 - ul.offsetLeft 当前的距离
                // -230 / 10 23 -- -230 - 23 
                // -230 - -230 == 0
                if (motion > 0) {
                    motion = Math.ceil(motion);
                } else {
                    motion = Math.floor(motion);
                }
                // 赋值ul的位置 0 + 23 + 46
                // 当motion归0时 = ul赋值 230 + 0 = 230
                ul.style.left = ul.offsetLeft + motion + "px";
            }, 30);

            // ol li 的样式
            var value = index;
            if (index == 4) {
                value = 0
            }
            for (var x = 0; x < list.length; x++) {
                list[x].className = "";
            }
         list[value].className = "active";
        }

        // 鼠标划入ol li
        // onmouseover    onmouseenter 阻止冒泡
     for (var y = 0; y < list.length; y++) {
         (function (y) {
             list[y].onmouseover = function () {
                 // 清除其他的样式
                 for (var z = 0; z < list.length; z++) {
                     list[z].className = "";
                 }
                 // 选中的样式
                 list[y].className = "active";
                 // 让图片的index和li的y对应上
                 index = y;
                 speed()
             }
         }(y))
     }
     // 定时器，让图片自己走
     indexTime = setInterval(function () {
         if (index == 4) {
             index = 0
             ul.style.left = "0px";
         }
         index++
         speed()
     }, 1000);
      // 进入窗口时，停止自动走的定时器
     win.onmouseover = function () {
         clearInterval(indexTime);
     }
     win.onmouseout = function () {
         indexTime = setInterval(function () {
             if (index == 4) {
                 index = 0
                 ul.style.left = "0px";
             }
             index++
             speed()
         }, 2000);
     }

主要的逻辑就是：
1.点击箭头，让ul去走1张图的距离
2.图片走的过程要有动画
3.当图片走到第1张时，位置改成最后1张的位置，当图片走到最后1张的位置时，位置改成第1张的位置
4.下面选中的样式，要跟着图片改变
5.当鼠标滑过对应的ol下的li时，动画到对应的图片上
6.加定时器，让它自己动
7.鼠标划入窗口时，定时器要停止

大概实现效果：