两种js原生无缝轮播方法

小编注释写得很详细哟，这两种都很好理解

第一种 克隆首位两个节点

html代码

	<div id='slide'>
        <ul>
            <li><div class="red">1</div></li>
            <li><div class="green">2</div></li>
            <li><div class="blue">3</div></li>
            <li><div class="yellow">4</div></li>
            <li><div class="gray">5</div></li>
        </ul>
        <div id="arrowLeft"></div>
        <div id="arrowRight"></div>
    </div>

css代码

	  *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #slide{
            width: 620px;
            height: 250px;
            margin: 100px auto;
            padding: 50px 0;
            position: relative;
            border: 1px solid #000;
            overflow: hidden;
        }
        #slide ul{
            width: 500%;
            height: 250px;
        }
        #slide li{
            width: 620px;
            height: 250px;
            float: left;
        }
        #slide li>div{
            width: 620px;
            height: 250px;
        }
        #slide li>div.red{
            background: red;
        }
        #slide li>div.green{
            background: green;
        }
        #slide li>div.blue{
            background: blue;
        }
        #slide li>div.yellow{
            background: yellow;
        }
        #slide li>div.gray{
            background: gray;
        }
        #arrowLeft,#arrowRight{
            width: 30px;
            height: 50px;
            position: absolute;
            top: calc(50% - 25px);
            background: #000;
        }
        #arrowLeft{
            left: 0;
        }
        #arrowRight{
            right: 0;
        }

js代码

	<script>
        var slide=document.querySelector('#slide')
        var slideUl=document.querySelector('#slide ul')
        var li=document.querySelectorAll('#slide ul li')
        var arrowLeft=document.querySelector('#arrowLeft')
        var arrowRight=document.querySelector('#arrowRight')
        function init(){
            var firstCopy=li[0].cloneNode(true) //克隆第一个
            var lastCopy=li[4].cloneNode(true)  //克隆最后一个
            slideUl.style.width='700%'   //长度改到700%
            slideUl.style.position='absolute'
            slideUl.style.left='-620px' //因为现在的第一个是克隆的最后一个节点，所以初始要改到原来的第一个
            slideUl.appendChild(firstCopy)
            slideUl.insertBefore(lastCopy,li[0])
        }
        init()

        function moverLeft(){
            slideUl.style.left=parseInt(slideUl.style.left)-620+'px'
            slideUl.style.transition='0.3s'
            if(parseInt(slideUl.style.left)<-3720){
                slideUl.style.left='-620px' 
                slideUl.style.transition='none'//到了最后一张就回到原来的第一张，并且没有过渡
                setTimeout(function(){ //接下来让定时器完成下一次的移动
                    slideUl.style.left='-1240px'
                    slideUl.style.transition='0.3s'
                },0);
            }
        }
        arrowRight.onclick=moverLeft

        function moverRigtht(){  //两边一样的思路
            slideUl.style.left=parseInt(slideUl.style.left)+620+'px'
            slideUl.style.transition='0.3s'
            if(parseInt(slideUl.style.left)>0){
                slideUl.style.left='-3100px'
                slideUl.style.transition='none'
                setTimeout(function(){
                    slideUl.style.left='-2480px'
                    slideUl.style.transition='0.3s'
                },0);
            }
        }
        arrowLeft.onclick=moverRigtht
    </script>

第二种 无需克隆

html 代码

	<div id='slide'>
        <ul>
            <li><div class="red">1</div></li>
            <li><div class="green">2</div></li>
            <li><div class="blue">3</div></li>
            <li><div class="yellow">4</div></li>
            <li><div class="gray">5</div></li>
        </ul>
        <div id="arrowLeft"></div>
        <div id="arrowRight"></div>
    </div>

css代码

	  *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #slide{
            width: 620px;
            height: 250px;
            margin: 100px auto;
            padding: 50px 0;
            position: relative;
            border: 1px solid #000;
            overflow: hidden;
        }
        #slide ul{
            width: 500%;
            height: 250px;
        }
        #slide li{
            width: 620px;
            height: 250px;
            float: left;
        }
        #slide li>div{
            width: 620px;
            height: 250px;
        }
        #slide li>div.red{
            background: red;
        }
        #slide li>div.green{
            background: green;
        }
        #slide li>div.blue{
            background: blue;
        }
        #slide li>div.yellow{
            background: yellow;
        }
        #slide li>div.gray{
            background: gray;
        }
        #arrowLeft,#arrowRight{
            width: 30px;
            height: 50px;
            position: absolute;
            top: calc(50% - 25px);
            background: #000;
        }
        #arrowLeft{
            left: 0;
        }
        #arrowRight{
            right: 0;
        }

js代码

	<script>
        var slide=document.querySelector('#slide')
        var slideUl=document.querySelector('#slide ul')
        var li=document.querySelectorAll('#slide ul li')
        var arrowLeft=document.querySelector('#arrowLeft')
        var arrowRight=document.querySelector('#arrowRight')
        
        var x=0
        function moverLeft(){
            x-=620
            slideUl.style.transform=`translate(${x}px)`
            slideUl.style.transition='0.3s'
            if(x<-2480){
                li[0].style.transform=`translate(${-x}px)`//点击最后一张之后，设置第一张的位置到最后一张
            }
            if(x<-3100){
                x=-620
                slideUl.style.transform=`translate(0px)`
                slideUl.style.transition='none'//回到第一张
                setTimeout(function(){ //跟第一种一样的思路
                    slideUl.style.transform=`translate(${x}px)`
                    slideUl.style.transition='0.3s'
                    li[0].style.transform=`translate(0px)`//把第一张设到原来的位置就是0
                }, 0);
            }
        }
        arrowRight.onclick=moverLeft

       function moverRigtht(){
            x+=620
            slideUl.style.transform=`translate(${x}px)`
            slideUl.style.transition='0.3s'
            if(x>0){
                li[li.length-1].style.transform = `translate(-3100px)`
            }
            if(x>620){
                x=-1860
                slideUl.style.transform=`translate(-2480px)`
                slideUl.style.transition='none'
                setTimeout(function(){
                    slideUl.style.transform=`translate(${x}px)`
                    slideUl.style.transition='0.3s'
                    li[li.length-1].style.transform=`translate(0px)`
                },0)
            }
        }
        arrowLeft.onclick=moverRigtht
    </script>