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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2989 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

translate

切换

tanslate

div

10 条回复 • 2019-03-19 16:03:26 +08:00

sherlocktheplant

2016-10-21 22:46:44 +08:00

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

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

abcdGJJ

2016-10-21 23:01:06 +08:00

@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"><</a>
<a href="javascript:;" id="next" class="arrow">></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

2016-10-22 00:12:28 +08:00

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

chemzqm

2016-10-22 04:23:29 +08:00

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

abcdGJJ

2016-10-22 09:26:55 +08:00 via Android

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

abcdGJJ

2016-10-22 09:27:09 +08:00 via Android

@chemzqm 好的，我去看看

GermXu

2016-10-22 10:12:09 +08:00

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

chemzqm

2016-10-22 22:12:39 +08:00

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

maxixi

2017-07-13 09:47:06 +08:00

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

xsjyvi

2019-03-19 16:03:26 +08:00

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