点击箭头滚动，到最后一个图片时，第一张循环到最后

登录

本帖最后由牧者于 2023-10-24 11:24 编辑

现在需求是这样的，用的图文列表，这种点击向后移动一个，进行循环滚动，页面刷新时回到第一项

Simon.Sun · Simon.Sun

本帖最后由 Simon.Sun 于 2023-10-17 10:57 编辑

您好，这边做了一个 Demo，您可以参考一下，利用了取模运算实现图片序号轮转循环。
比如说，一共有 5 张图片，每次只展示三条，那么就可以借助一个递增的序号和取模运算实现序号轮转，比如：

递增序号：-5 -4 -3 -2 -1 0 1 2 3 4 5 6
取模结果： 0 1 2 3 4 0 1 2 3 4 0 1

使用两张表格，一张表格用来绑定图文列表，进行数据展示（每次展示 3 条）；另外一张表维护图片数据，比如一共有 5 条。
使用命令来组织轮转逻辑，每次从数据表取出对应序号的数据，放到图文列表绑定的表中。
命令逻辑如下：

轮转主要靠上面的取模运算计算行号，然后选择改行，并将数据传递到图文列表绑定的表格中，进行展示。

为了命令复用，这里将同一个命令放到一个辅助按钮中，其他调用的地方，利用操作单元格命令触发即可。（本来想把命令写到模板命令的，但是模板命令现在不支持循环命令，不过这个已经记录产品需求了）

这里没有写自动轮转的逻辑，可以结合定时执行插件或 JS 命令，定时触发向左的按钮就行。
效果如下：

fanhuayimeng · fanhuayimeng

这个帖子可以参考一下：

让图文列表滚动起来

牧者 · 牧者

fanhuayimeng 发表于 2023-10-12 10:31
这个帖子可以参考一下：

怎么点击箭头，向后移动一个，并且到能够第一条和最后一条进行头尾循环

Grayson.Shang · Grayson.Shang

本帖最后由 Grayson.Shang 于 2023-10-12 12:18 编辑

大佬您好，我这边在原有的demo上做了一些修改，可以可以实现咱们想要的效果，咱们若是想要做垂直滚动的，可以根据demo做一些修改，咱们看看是否有达到咱们想要的效果

因为每次跳到开头和结尾，若是还是一直滚动的话，跳的效果不明显，我增加了一个功能，在跳转之后，先将自动滚动取消，5s后再开启，这样跳转也就比较明显了

没事测着玩 · 没事测着玩

本帖最后由没事测着玩于 2023-10-12 15:26 编辑

只能说，自己写还真不太爽，不如直接用轮播图。PS：主要是坐标计算很麻烦，我简单的做了个，楼主可以自己修改计算方式。哦，我把自动轮播删了，没注意是这两个需求共存，你可以再加上这个自动轮播的JS。

牧者 · 牧者

没事测着玩发表于 2023-10-12 15:19
只能说，自己写还真不太爽，不如直接用轮播图。PS：主要是坐标计算很麻烦，我简单的做了个，楼主可以自己修 ...

这个没有滑动的效果，想要的效果是把自动滚动变成点击按钮向后一条，

Grayson.Shang · Grayson.Shang

大佬您好，我这边对您的需求做了一些修改，您看看是不是想要的效果

没事测着玩 · 没事测着玩

本帖最后由没事测着玩于 2023-10-13 09:35 编辑

牧者发表于 2023-10-12 16:26
这个没有滑动的效果，想要的效果是把自动滚动变成点击按钮向后一条，

根据你说的需求是把自动滚动变成点击按钮向后一条，我这个文件就能实现，楼上超级版主的方法也可以。滑动效果要搞js的transform，我不确定能不能用这个。

牧者 · 牧者

Grayson.Shang 发表于 2023-10-12 18:19
大佬您好，我这边对您的需求做了一些修改，您看看是不是想要的效果

这个能不能做到首尾循环呀

		自动登录	找回密码
密码			立即注册

[已处理] 点击箭头滚动，到最后一个图片时，第一张循环到最后

最佳答案

27 个回复

本帖子中包含更多资源

评分

本帖子中包含更多资源

评分

本帖子中包含更多资源

评分

本帖子中包含更多资源

评分

本帖子中包含更多资源

Wyn高级认证

Wyn认证

活字格认证

活字格高级认证

时代开发者征文活动

悬赏达人

圣诞拼拼乐