求指点~ translate 实现图片无缝轮播

[abcdGJJ]

当前思路：在父 div 设置 translate(0, 0),然后每次切换时更改 X 坐标，即 tanslate(-600px, 0)

问题：当切换到最后一张图片时，再点击切换时我想要回到第一张图，然后设置成 translate(0, 0)，但是动画的方向却反了，有没有什么办法能实现方向不变的切换？

[sherlocktheplant]

始终只显示当前屏幕能够容纳的图片数量 N + 2 的数量的图片 当最左边的一张图片彻底不可见时则将该标签移动到所有标签的最后一个 并且把 URL 设置成即将进入视野（但还不可见）的图片的 URL

当滑动到最后一张的时候 所有逻辑都一样 只是即将进入的那张图片变成了第一张而已

[abcdGJJ]

@sherlocktheplant 改变 URL ？有没有通过改变 css 来实现的方法？

这是我当前的代码：

```
<ul class="photo" id="photo">
<li><img src="imgs/5.jpg" alt=""></li>
<li><img src="imgs/1.jpg" alt=""></li>
<li><img src="imgs/2.jpg" alt=""></li>
<li><img src="imgs/3.jpg" alt=""></li>
<li><img src="imgs/4.jpg" alt=""></li>
<li><img src="imgs/5.jpg" alt=""></li>
<li><img src="imgs/1.jpg" alt=""></li>
</ul>
<a href="javascript:;" id="prev" class="arrow">&lt;</a>
<a href="javascript:;" id="next" class="arrow">&gt;</a>
```

```
var photo = document.querySelector('#photo'),
nextItem = document.querySelector('#next')
index = 1
var translate = function (dom, type, time) {
dom.style.transform = type
dom.style.transitionDuration = time + 's'

}
var animated = function (offset) {
go = 'translate(' + offset*index + 'px, 0)'
if(index == 6) {
index = 1
}
console.log(go)
translate(photo, go, 0.5)
}
var next = function () {
index++
animated(-600)
}
nextItem.onclick = next;
```

[sherlocktheplant]

@abcdGJJ 没有办法 因为你说的滚动逻辑不符合浏览器的渲染规则

[chemzqm]

换实现方式，可参考苹果官网

[abcdGJJ]

@sherlocktheplant 但是我看淘宝首页的轮播图可以实现，一直搞不懂原理

[abcdGJJ]

@chemzqm 好的，我去看看

[GermXu]

@chemzqm 官网的轮播图怎么取消了, 这才几天, 又要换样式了?

[chemzqm]

@GermXu 没办法，人家生产力过剩😂

[maxixi]

同遇到这个问题，楼主解决了吗？

[xsjyvi]

这个问题其实有点意思。
1. 以前使用 relative，left 属性是可已解决的。
2. 现在使用 translate 就不行了，初步断定是 translate 不会引起浏览器“重排”导致。
3. 按阮一峰的说法就是 浏览器已经很智能了，会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染。
4. 解决路径把最后的跳转逻辑放到 setTimeout，17， 或者使用 window.requestAnimationFrame() 方法。