apple.com 首页跑马灯效果实现原理是怎样？

特点：
1，无论点击多快，都保持了跑马灯的动画效果。
2，无论点击多块，都能够保持圆形旋转效果不间断。
3，无论点击多快，都能够保持了移动距离的准确性。

疑惑：
1，据我观察，代码应该是动态的根据点击的频率改变了动画执行的帧率。
2，我自己写圆形旋转跑马灯效果是要添加多余的元素标签的，如下代码中的第一个li和最后一个li元素，但是apple的代码中并没有这样多余的元素，那么是如何实现这种效果的呢？从最后一张到第一张的无缝切换。
3，动画效果的整体性，据我观察无论你之前点击滑动多少次，点击有多块，它最后一次执行的动画效果都是正常的点击一次的效果。

求大神解惑。。。
不知道这算不算伸手党...(哭笑不得.jpg)
观摩地址：www.apple.com

<div class='box'>
    <ul class='list'>
        <li class='item'> <img src='images/img4.jpg'/> </li>
        <li class='item'> <img src='images/img1.jpg'/> </li>
        <li class='item'> <img src='images/img2.jpg'/> </li>
        <li class='item'> <img src='images/img3.jpg'/> </li>
        <li class='item'> <img src='images/img4.jpg'/> </li>
        <li class='item'> <img src='images/img1.jpg'/> </li>
    </ul>
</div>

给个简单的 demo，懒得实现循环了（也就是说从最右到最左的切换是从右向左而不是 apple 那样从左往右）

https://bumfo.github.io/transition.html

<!DOCTYPE html>
<title>Transition</title>

<style>
html {
    font: 16px sans-serif;
}
article {
    width: 500px;
    overflow: hidden;
}
div {
    width: 2500px;
    transform: translate3d(0px, 0px, 0px);
    transition: transform ease 1s;
}
section {
    width: 500px;
    height: 100px;
    float: left;
    padding: 15px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
</style>

<article>
<div id="div">
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
    <section>5</section>
</div>
</article>

<button onclick="prev()">prev</button>
<button onclick="next()">next</button>

<script>
let total = 5;
let width = 500;

let index = 0;

let divDom = document.querySelector('#div');

function tranformScroll() {
    let x = -index * width;
    divDom.style.transform = 'translate3d(' + x + 'px, 0px, 0px)';
}

function normalizeIndex() {
    index = (total + index % total) % total;
}

function prev() {
    --index;
    normalizeIndex();
    tranformScroll();
}

function next() {
    ++index;
    normalizeIndex();
    tranformScroll();
}


</script>

谢邀

这还不简单

传统的思路是点一次切换一次，一旦加入过渡，就会出现题主所想的一系列问题

新的思路是 ViewModel 和 View 分开

点一次，ViewModel 中的当前页面切换一次。

过渡是从旧页面直接切换到当前页面，而不是一个一个切换

自然就可以满足那几个条件

以上

补充一下，那个循环切换的效果并不完美，会出现闪烁，说明浏览器进行了缓慢的 layout

可以推测是每次页面滚到头，都会把最左侧的一系列页面挪到右边

【热门文章】