V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
abcdGJJ
V2EX  ›  问与答

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

  •  
  •   abcdGJJ · 2016-10-21 22:38:29 +08:00 · 4206 次点击
    这是一个创建于 2953 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    10 条回复    2019-03-19 16:03:26 +08:00
    sherlocktheplant
        1
    sherlocktheplant  
       2016-10-21 22:46:44 +08:00
    始终只显示当前屏幕能够容纳的图片数量 N + 2 的数量的图片 当最左边的一张图片彻底不可见时则将该标签移动到所有标签的最后一个 并且把 URL 设置成即将进入视野(但还不可见)的图片的 URL

    当滑动到最后一张的时候 所有逻辑都一样 只是即将进入的那张图片变成了第一张而已
    abcdGJJ
        2
    abcdGJJ  
    OP
       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">&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
        3
    sherlocktheplant  
       2016-10-22 00:12:28 +08:00
    @abcdGJJ 没有办法 因为你说的滚动逻辑不符合浏览器的渲染规则
    chemzqm
        4
    chemzqm  
       2016-10-22 04:23:29 +08:00
    换实现方式,可参考苹果官网
    abcdGJJ
        5
    abcdGJJ  
    OP
       2016-10-22 09:26:55 +08:00 via Android
    @sherlocktheplant 但是我看淘宝首页的轮播图可以实现,一直搞不懂原理
    abcdGJJ
        6
    abcdGJJ  
    OP
       2016-10-22 09:27:09 +08:00 via Android
    @chemzqm 好的,我去看看
    GermXu
        7
    GermXu  
       2016-10-22 10:12:09 +08:00
    @chemzqm 官网的轮播图怎么取消了, 这才几天, 又要换样式了?
    chemzqm
        8
    chemzqm  
       2016-10-22 22:12:39 +08:00
    @GermXu 没办法,人家生产力过剩😂
    maxixi
        9
    maxixi  
       2017-07-13 09:47:06 +08:00
    同遇到这个问题,楼主解决了吗?
    xsjyvi
        10
    xsjyvi  
       2019-03-19 16:03:26 +08:00
    这个问题其实有点意思。
    1. 以前使用 relative,left 属性是可已解决的。
    2. 现在使用 translate 就不行了,初步断定是 translate 不会引起浏览器“重排”导致。
    3. 按阮一峰的说法就是 浏览器已经很智能了,会尽量把所有的变动集中在一起,排成一个队列,然后一次性执行,尽量避免多次重新渲染。
    4. 解决路径把最后的跳转逻辑放到 setTimeout,17, 或者使用 window.requestAnimationFrame() 方法。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   976 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 20:45 · PVG 04:45 · LAX 12:45 · JFK 15:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.