在两个方向上进行无限滑动过渡

Question

我有一个移动网站，并且希望能够向左和向右滑动以在页面之间进行切换，但是在无限循环中。当第一页上出现左侧滑动时，应显示最后一页，当最后一页出现右侧滑动时，应显示第一页。

我怎样才能达到这个效果？ Here is my jsfiddle link

var oUl = document.getElementById('test');
var aLi = oUl.getElementsByTagName('li');
    
var sX = 0;
var sLeft = 0;
var index = 0; 
var curLeft = 0;
var disX = 0;

oUl.addEventListener('touchstart', touchstart, false);

function touchstart(e) {
    e.preventDefault();
    sX = e.changedTouches[0].pageX;

    sLeft = oUl.style.transform ? -parseInt(/\d+/.exec(oUl.style.transform)[0]) : 0;
    oUl.style.transition = 'none';

    document.addEventListener('touchmove', touchmove, false);
    document.addEventListener('touchend', touchend, false);
}

function touchmove(e) {
    disX = e.changedTouches[0].pageX - sX;
    curLeft = sLeft + disX;
    oUl.style.transform = 'translateX(' + curLeft + 'px)';
}

function touchend(e) {
     if (disX > 100) { 
        if (index != 0) {
            index -= 1;
        }
    } 
    if (disX < -100) {
        if (index != aLi.length - 1) {
            index += 1;
        }
    }
    oUl.style.transition = '.5s';
    oUl.style.transform = 'translateX(' + -index*aLi[0].offsetWidth + 'px)';
}

body { margin: 0; }
.box { width: 100%; overflow: hidden; }
ul,li { margin: 0; padding: 0; list-style: none; }
ul { width: 500%; overflow: hidden; transition: .5s; }
li { width: 20%; float: left; }
li { font-size: 40px; color: #fff; text-align: center; line-height: 150px; }
li:nth-of-type(1) { background: orange; }
li:nth-of-type(2) { background: red; }
li:nth-of-type(3) { background: pink; }
li:nth-of-type(4) { background: green; }
li:nth-of-type(5) { background: #333; }

<div class="box">
    <ul id="test">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

Answer 1

我会尝试“刷”第一个和最后一个“li”之间的内容

这样的事情：

$('.box li:first-child').html( $('.box li:last-child') )

我不知道它是否适用于您的项目。祝你好运：）