JavaScript 移动端无缝轮播图

虽然现在插件多有轮播图效果，但是还是想记录下来，自己能了解逻辑与原理

css部分

<style>
        * {            margin: 0;            padding: 0;            list-style: none;        }
        body {            text-align: center;        }

        .sliderBox {
            position: relative;
            width: 750px;
            overflow: hidden;
            height: 340px;
            margin: 50px auto;
            background-color: #0473df;
        }

        ul {
            position: absolute;
            left: 0;
            margin-left: -750px;
            top: 0;
        }

        ul li {
            float: left;
            width: 750px;
            position: relative;
        }
        ul li img {
            width: 750px;
            height: 340px;
        }     
  ol {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
        }
        ol li {
            width: 10px;
            cursor: pointer;
            height: 10px;
            float: left;
            transition: all .2s;
            border-radius: 10px;
            border: 1px solid #fff;
            margin: 0 2px;
        }
        ol li.on {            background-color: #fff;            width: 20px;        }
    </style>

HTML部分

 <div class="sliderBox">
        <ul class="slider-wrapper">
            <li class="slider-item">
                    <a href="#"><img src="04.jpg" /></a>
    
            </li>
            <li class="slider-item">
                <a href="#"><img src="01.jpeg" /></a>

            </li>
            <li class="slider-item">
                <a href="#"><img src="02.jpeg" /></a>

            </li>
            <li class="slider-item">
                <a href="#"><img src="03.jpeg" /></a>

            </li>
            <li class="slider-item">
                    <a href="#"><img src="04.jpg" /></a>
    
                </li>
            <li class="slider-item">
                <a href="#"><img src="01.jpeg" /></a>

            </li>

        </ul>
        <ol class="circleDot">
            <li class="on"></li>
            <li></li>
            <li></li><li></li>
        </ol>
    </div>

javascript部分

  <script>
        window.addEventListener('load', function () {
            var sliderBox = document.querySelector(".sliderBox");
            var ul = document.querySelector("ul");
            var ol = document.querySelector("ol");
            var w = sliderBox.offsetWidth;

            ul.style.width = ul.children.length * w + "px";

            var index = 0;
            var timer = setInterval(function () {
                index++;
                var translatex = -index * w;
                ul.style.transition = 'all .5s';
                ul.style.transform = 'translateX(' + translatex + 'px)';

            }, 2000);

            
            ul.addEventListener('transitionend', function () {
                if (index >= 4) {
                    index = 0;
                    ul.style.transition = 'none';
                    var translatex = -index * w;
                    ul.style.transform = 'translateX(' + translatex + 'px)';
                } else if (index < 0) {
                    index = 3;
                    ul.style.transition = 'none';
                    var translatex = -index * w;
                    ul.style.transform = 'translateX(' + translatex + 'px)';
                };

                ol.querySelector(".on").classList.remove('on');
                ol.children[index].classList.add("on")

            })

            var startX = 0;
            var moveX = 0;
            var flag=false;
            ul.addEventListener("touchstart", function (e) {
                startX = e.targetTouches[0].pageX;
                clearInterval(timer);

            })
            ul.addEventListener("touchmove", function (e) {
                moveX = e.targetTouches[0].pageX - startX;
                var translatex = -index * w + moveX;
                ul.style.transition = 'none';
                ul.style.transform = 'translateX(' + translatex + 'px)';
                flag=true;
                e.preventDefault();
            })
            ul.addEventListener("touchend", function (e) {
              if(flag){
                if(Math.abs(moveX)>70){
                    if(moveX>0){index--;}else{index++}
                    var translatex = -index * w;
                ul.style.transition = 'all .5s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
                }else{
                    var translatex = -index * w;
                    ul.style.transform = 'translateX(' + translatex + 'px)';
                }
                clearInterval(timer);
                timer = setInterval(function () {
                index++;
                var translatex = -index * w;
                ul.style.transition = 'all .5s';
                ul.style.transform = 'translateX(' + translatex + 'px)';

            }, 2000);
              }            
                
            })

        })

    </script>