这是一个创建于 2954 天前的主题，其中的信息可能已经有所发展或是发生改变。
当前思路：在父 div 设置 translate(0, 0),然后每次切换时更改 X 坐标，即 tanslate(-600px, 0)
问题：当切换到最后一张图片时，再点击切换时我想要回到第一张图，然后设置成 translate(0, 0)，但是动画的方向却反了，有没有什么办法能实现方向不变的切换？
 |
1
sherlocktheplant 2016-10-21 22:46:44 +08:00
始终只显示当前屏幕能够容纳的图片数量 N + 2 的数量的图片 当最左边的一张图片彻底不可见时则将该标签移动到所有标签的最后一个 并且把 URL 设置成即将进入视野（但还不可见）的图片的 URL
当滑动到最后一张的时候 所有逻辑都一样 只是即将进入的那张图片变成了第一张而已 |
 |
2
abcdGJJ OP @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; ``` |
|
3
sherlocktheplant 2016-10-22 00:12:28 +08:00
@abcdGJJ 没有办法 因为你说的滚动逻辑不符合浏览器的渲染规则
|
 |
4
chemzqm 2016-10-22 04:23:29 +08:00
换实现方式，可参考苹果官网
|
|
5
abcdGJJ OP @sherlocktheplant 但是我看淘宝首页的轮播图可以实现，一直搞不懂原理
|
 |
9
maxixi 2017-07-13 09:47:06 +08:00
同遇到这个问题，楼主解决了吗？
|
 |
10
xsjyvi 2019-03-19 16:03:26 +08:00
这个问题其实有点意思。
1. 以前使用 relative，left 属性是可已解决的。 2. 现在使用 translate 就不行了，初步断定是 translate 不会引起浏览器“重排”导致。 3. 按阮一峰的说法就是 浏览器已经很智能了，会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染。 4. 解决路径把最后的跳转逻辑放到 setTimeout，17， 或者使用 window.requestAnimationFrame() 方法。 |
Select Language