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

求一个轮播图的制作思路

  •  
  •   jamfer · 250 天前 · 887 次点击
    这是一个创建于 250 天前的主题,其中的信息可能已经有所发展或是发生改变。
    演示如: https://notefolio.net

    想做一个跟这个一摸一样的轮播图,用 jquery 。左右滚动已经 OK 了,问题是不知道他怎么实现的无缝衔接(滚动到最后一个的时候后面衔接第一个,往前滚动也是衔接最后一个)
    11 条回复    2024-02-29 17:46:06 +08:00
    brader
        1
    brader  
       250 天前
    这个我天天刷抖音无聊看到有个做前端卖大师课的,讲的就很好,我一个后端听得津津有味。
    大概思路就是,比如图片是 N 张,放多第一张图片在 N+1 的位置,这样就无缝衔接了。
    然后继续向后滚动的时候,就把图片位置瞬间切回第一张的位置,再继续滚动动画,以此类推下去就是无限循环了
    MENGKE
        2
    MENGKE  
       250 天前
    复制第一张,放在最后一张后边。当滚动到复制的这张的时候,把当前位置改为第一张,就无缝衔接了。
    往前滚动同理。
    建议打开控制台看一下。
    AoEiuV020JP
        3
    AoEiuV020JP  
       250 天前
    这个求助不如找些开源的参考一下学的多,
    一般通用的一种套路是设置 2 亿个 item ,循环映射到真实的数据列表中,初始状态滚到中间对应真实 index 为 0 ,这样就能前后滚动一亿次,等于无限循环了,
    brader
        4
    brader  
       250 天前
    @AoEiuV020JP 大哥你这思路好逆天啊,我一个后端都感觉不靠谱,哈哈哈
    MRG0
        5
    MRG0  
       250 天前
    @AoEiuV020JP #3 一般?通用?
    AoEiuV020JP
        6
    AoEiuV020JP  
       250 天前
    @brader #4 我是客户端的,不清楚 web 前端是怎样,但应该能视图复用,只要这一点没问题,1 亿个 item 和 2 亿个 item 资源占用是一样的,只是一个数字而已,
    这种情况真的可以直接用一个超大列表实现无限循环的,反正真正加载的也只有屏幕中显示的部分,数据源也是真实数据大小,
    AlvaMu
        7
    AlvaMu  
       250 天前
    一,二楼正解
    bianhui
        8
    bianhui  
       249 天前
    每一次右滚把上一次消失的图片塞到最右侧,反过来一样
    AoEiuV020JP
        9
    AoEiuV020JP  
       249 天前
    @MRG0 #5 没这么做过的确实可能误解我说的方案,
    首先,这里 2 亿个 item 不是让你把 item 复制 2 亿次,也不需要真的出现 length 为 2 亿的数组,2 亿只是个 count ,也可以是 21 亿,效果一样的,
    而且这种方案必须先实现视图复用,2 亿个 item 只加载屏幕上真实显示的几个,这个视图复用是客户端开发入门里的常规优化,虽然我觉得 web 端做列表也得做视图复用,但我确实见过有人 web 加载所有 item 的情况,可能要看情况吧,
    AoEiuV020JP
        10
    AoEiuV020JP  
       249 天前
    @AoEiuV020JP #9 2 亿这个数字确实比较大,换个说法,web 开发是不是默认 加载控件数==列表长度?
    客户端开发一般是认为 加载控件数==屏幕容纳的控件数+1 ,视角不一样可能同一句话想象出的效果不一样,
    rj
        11
    rj  
       249 天前
    swiper
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5548 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:52 · PVG 15:52 · LAX 23:52 · JFK 02:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.