jQuery FlexSlider 自适应图片轮播插件,显示注册人数和新用户,支持自定义图片地址和超链接(cf_flexslider) 1F
CF
管理员组 管理员组
2021-07-08 16:07
楼主

虽然简易的图片轮播实现起来很简单,但目前xiuno的公开插件里貌似还没发现有图片轮播插件,也就“绿叶子”主题插件带图片轮播功能。所以便制作了这么一款图片轮播插件。

不重复造轮子了,直接基于FlexSlider进行插件的制作。

Flexslider具有以下特性:

  1. 支持滑动和淡入淡出效果。
  2. 支持水平、垂直方向滑动。
  3. 支持键盘方向键控制。
  4. 支持触控滑动。
  5. 支持图文混排,支持各种html元素。
  6. 自适应屏幕尺寸。
  7. 可控制滑动单元个数。
  8. 更多选项设置和回调函数。

本插件没使用那么多特性,仅以实现漂亮的图片轮流滚动为目标进行制作。点击图片可跳转到指定超链接。

效果图:

后台可设置参数:

图片参数说明:

请按示例格式进行填写内容:

图片1地址,超链接1|图片2地址,超链接2

图片地址和超链接直接是英文逗号,每一组直接用管道符“|”分割,最后面结束时不要添加“|”。

如果超链接地址为空,则点击图片时不会进行跳转。

理论上可以无限制添加图片,但实际添加时不建议过多(会丑)。

 

最后于 2022-03-14 15:20 被CF编辑 ,原因: 增加自适应功能
上传的附件:
找不到工作/(ㄒoㄒ)/~~

 收藏 分享
最新回复 (19)
  • 鲁班
    二级用户组
    2021-07-17 12:53
    沙发

    刚扒了你站这个轮播,放在自己站上不好看,这个只有淡入淡出、左右和上下特效,看上面图参数,百度也有现成的插件,hook进去,再修改js、图片、css路径就搞定,根本不用查看代码复制粘贴。我还是喜欢下面3楼说的插件,多特效。

  • 鲁班
    二级用户组
    2021-07-17 12:57
    板凳

    easing和Camera组合,很多特效,漂亮,不过会占资源

  • CF
    管理员组
    2021-07-17 13:59
    地板
    鲁班 刚扒了你站这个轮播,放在自己站上不好看,这个只有淡入淡出、左右和上下特效,看上面图参数,百度也有现成的插件,hook进去,再修改js、图片、css路径就搞定,根本不用查看代码复制粘贴。我还是喜欢下面3 ...

    我现在用的轮播也是网上抄的,没使用Flexslider

    找不到工作/(ㄒoㄒ)/~~
  • 鲁班
    二级用户组
    2021-07-17 16:50
    4楼
    CF 我现在用的轮播也是网上抄的,没使用Flexslider

  • CF
    管理员组
    2021-07-17 17:11
    5楼
    鲁班

    尴尬了,忘记禁用这个插件了

    找不到工作/(ㄒoㄒ)/~~
  • 鲁班
    二级用户组
    2021-07-17 19:54
    6楼
    CF 尴尬了,忘记禁用这个插件了

    跟这个https://blog.csdn.net/weixin_36325174/article/details/117978046

  • 鲁班
    二级用户组
    2021-07-17 23:54
    7楼
    鲁班 跟这个https://blog.csdn.net/weixin_36325174/article/details/117978046

    你站现在用的轮播,↑↑上面这个链接是代码。

    ↓↓下面这个是演示和完整代码下载

    https://www.17sucai.com/pins/33380.html

    把里面body代码hook进需要显示的钩子里,css放在head,js放在当前需页面hook的js钩子里,然后改一下所有路径,搞定。

  • aqabcd
    二级用户组
    2021-07-18 14:40
    8楼

    插件还需要便宜哦,太贵了真买不起

  • CF
    管理员组
    2021-07-18 16:55
    9楼
    aqabcd 插件还需要便宜哦,太贵了真买不起

    改了半价也没人买😭

    找不到工作/(ㄒoㄒ)/~~
  • aqabcd
    二级用户组
    2021-07-20 14:04
    10楼

    手机端感觉不协调,没有同时缩放

  • aqabcd
    二级用户组
    2021-07-20 14:06
    11楼

    跟你网页图片轮播不一样 ,好像不是同一个插件

  • CF
    管理员组
    2021-07-20 17:00
    12楼
    aqabcd 手机端感觉不协调,没有同时缩放

    重新修改了,增加了自适应功能,不需要设置高度了。请重新下载附件。

    找不到工作/(ㄒoㄒ)/~~
  • CF
    管理员组
    2021-07-20 17:01
    13楼
    aqabcd 跟你网页图片轮播不一样 ,好像不是同一个插件

    目前本站上线的轮播是主题自带的,几个月之前就写好的,js有点问题,所以才重新做的这个插件。本贴的插件跟本站的轮播不是同一个。

    找不到工作/(ㄒoㄒ)/~~
  • CF
    管理员组
    2021-07-20 17:07
    14楼
    鲁班 你站现在用的轮播,↑↑上面这个链接是代码。 ↓↓下面这个是演示和完整代码下载 https://www.17sucai.com/pins/33380.html 把里面body代码hook进需要显示 ...

    好家伙👍

    找不到工作/(ㄒoㄒ)/~~
  • aqabcd
    二级用户组
    2021-07-21 08:21
    15楼
    CF 重新修改了,增加了自适应功能,不需要设置高度了。请重新下载附件。

    还是有点问题,大小不同的图片上传,有的空间填满了,有的空间没填满,包括手机端和电脑端

  • aqabcd
    二级用户组
    2021-07-21 08:30
    16楼

    还有高度现在需要怎么调节

  • CF
    管理员组
    2021-07-21 09:57
    17楼
    aqabcd 还是有点问题,大小不同的图片上传,有的空间填满了,有的空间没填满,包括手机端和电脑端

    图片轮播为啥不使用同规格的图片呢?如果想调节高度,就再下载一次附件吧。。。注意由于自适应问题,移动端的高度跟PC端不一样,强烈建议使用相同高度图片。

    找不到工作/(ㄒoㄒ)/~~
  • 鲁班
    二级用户组
    2021-07-23 12:18
    18楼

    在自己的测试站测试了还不错,省30金币。

    可以

  • CF
    管理员组
    2021-07-23 13:42
    19楼
    鲁班 在自己的测试站测试了还不错,省30金币。

    (lll¬ω¬)😢

    找不到工作/(ㄒoㄒ)/~~
  • 游客
    20楼
    登录 后参与评论
返回
CF
管理员组
主题数
帖子数
精华数