找回密码
 立即注册

QQ登录

只需一步,快速开始

牧者

初级会员

12

主题

46

帖子

234

积分

初级会员

积分
234
牧者
初级会员   /  发表于:2023-10-12 09:51  /   查看:4907  /  回复:27
10金币
本帖最后由 牧者 于 2023-10-24 11:24 编辑


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


附件: 您需要 登录 才可以下载或查看,没有帐号?立即注册

最佳答案

查看完整内容

您好,这边做了一个 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 条。 使用命令来组织轮 ...

27 个回复

倒序浏览
最佳答案
最佳答案
Simon.Sun活字格认证 Wyn认证
超级版主   /  发表于:2023-10-12 09:51:11
来自 17#
本帖最后由 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 命令,定时触发向左的按钮就行。
效果如下:







本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

参与人数 1满意度 +5 收起 理由
牧者 + 5

查看全部评分

回复 使用道具 举报
fanhuayimeng
论坛元老   /  发表于:2023-10-12 10:31:22
2#
这个帖子可以参考一下:


让图文列表滚动起来


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

参与人数 1金币 +222 收起 理由
Grayson.Shang + 222 赞一个!

查看全部评分

回复 使用道具 举报
牧者
初级会员   /  发表于:2023-10-12 10:33:55
3#
fanhuayimeng 发表于 2023-10-12 10:31
这个帖子可以参考一下:

怎么点击箭头,向后移动一个,并且到能够第一条和最后一条进行头尾循环
回复 使用道具 举报
Grayson.Shang活字格认证 Wyn认证
超级版主   /  发表于:2023-10-12 12:09:59
4#
本帖最后由 Grayson.Shang 于 2023-10-12 12:18 编辑

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




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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

参与人数 1满意度 +5 收起 理由
fanhuayimeng + 5

查看全部评分

回复 使用道具 举报
没事测着玩
高级会员   /  发表于:2023-10-12 15:19:40
5#
本帖最后由 没事测着玩 于 2023-10-12 15:26 编辑

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

参与人数 1金币 +222 收起 理由
Grayson.Shang + 222 很给力!

查看全部评分

回复 使用道具 举报
牧者
初级会员   /  发表于:2023-10-12 16:26:23
6#
没事测着玩 发表于 2023-10-12 15:19
只能说,自己写还真不太爽,不如直接用轮播图。PS:主要是坐标计算很麻烦,我简单的做了个,楼主可以自己修 ...

这个没有滑动的效果,想要的效果是把自动滚动变成点击按钮向后一条,
回复 使用道具 举报
Grayson.Shang活字格认证 Wyn认证
超级版主   /  发表于:2023-10-12 18:19:36
7#
大佬您好,我这边对您的需求做了一些修改,您看看是不是想要的效果


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
没事测着玩
高级会员   /  发表于:2023-10-13 09:32:19
8#
本帖最后由 没事测着玩 于 2023-10-13 09:35 编辑
牧者 发表于 2023-10-12 16:26
这个没有滑动的效果,想要的效果是把自动滚动变成点击按钮向后一条,

根据你说的需求是把自动滚动变成点击按钮向后一条,我这个文件就能实现,楼上超级版主的方法也可以。滑动效果要搞js的transform,我不确定能不能用这个。
回复 使用道具 举报
牧者
初级会员   /  发表于:2023-10-13 10:43:26
9#
Grayson.Shang 发表于 2023-10-12 18:19
大佬您好,我这边对您的需求做了一些修改,您看看是不是想要的效果

这个能不能做到首尾循环呀
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部