oaoo
文章页/
abcd/
页面/
文档/
导航菜单
  • 我的网址导航A
  • 封面图

    以上实例代码

    
    {% carousel %}
    https://www.runoob.com/try/demo_source/movie.mp4,autoplay,loop,muted,视频描述
    /images/suiji/1.jpg,第一张图片描述,https://www.baidu.com/
    /images/suiji/2.jpg,第一张图片描述
    /video/6.mp4,autoplay,loop,muted,视频描述
    /video/8.mp4,autoplay,loop,muted,视频描述
    BV1SehnzBEox,1,B站视频示例 - 已适配高度
    BV1SehnzBEox,1,另一B站视频示例
    {% endcarousel %}
    
    
    {% carousel 2 %}
    https://www.runoob.com/try/demo_source/movie.mp4,autoplay,loop,muted,视频描述
    /images/suiji/1.jpg,第一张图片描述,https://www.baidu.com/
    /images/suiji/2.jpg,第一张图片描述
    {% endcarousel %}
    
    
    {% carousel 4 %}
    
    /images/suiji/1.jpg,第一张图片描述,https://www.baidu.com/
    /images/suiji/2.jpg,第一张图片描述
    /images/suiji/3.jpg,第一张图片描述
    /images/suiji/4.jpg,第一张图片描述
    /images/suiji/5.jpg,第一张图片描述
    {% endcarousel %}
    

    1. 插件介绍

    这是一款功能丰富的 Hexo 轮播图插件,支持多种媒体类型轮播展示,并具备点击跳转功能。主要特性包括:

    • 支持三种媒体类型:图片、本地视频、B 站视频

    • 支持点击轮播项跳转到指定链接

    • 自动播放功能(鼠标悬停时暂停)

    • 响应式设计,适配不同屏幕尺寸

    • 带指示器和左右切换按钮

    • 无缝轮播效果

    • 支持轮播图数量

    例如写法为 {% carousel 4 %} 时表示显示4个轮播图
    
    <!-- 默认配置:1个/屏,高度自动,5秒轮播一次 -->
    {% carousel %}
      ...轮播内容...
    {% endcarousel %}
    
    <!-- 自定义:2个/屏,高度300px,3秒轮播一次 -->
    {% carousel 2 300px 3 %}
      ...轮播内容...
    {% endcarousel %}
    
    <!-- 自定义:3个/屏,高度50%,10秒轮播一次 -->
    {% carousel 3 50% 10 %}
      ...轮播内容...
    {% endcarousel %}

    2. 基本用法

    在 Markdown 文章中,使用 {% carousel %}` 和 `{% endcarousel %}

    标签包裹轮播项内容,每个轮播项单独占一行:

    {% carousel %}
      轮播项1配置
      轮播项2配置
      轮播项3配置
    {% endcarousel %}

    3. 轮播项配置说明

    3.1 图片类型

    格式:[图片地址, 描述文本, 跳转链接]

    (注:描述文本和跳转链接为可选参数)

    参数说明:

    • 图片地址:必填,支持 JPG、PNG、GIF 等常见图片格式

    • 描述文本:可选,会显示在轮播项底部的文字说明

    • 跳转链接:可选,点击图片时将跳转的目标地址(支持相对路径和绝对路径)

    示例:

    {% carousel %}
      # 仅包含图片
      https://example.com/image1.jpg
      
      # 图片+描述文本
      https://example.com/image2.jpg, 这是一张示例图片
      
      # 图片+描述文本+跳转链接
      https://example.com/image3.jpg, 点击跳转到首页, /index.html
    {% endcarousel %}

    3.2 视频类型

    格式:[视频地址, 视频属性, 描述文本, 跳转链接]

    (注:视频属性、描述文本、跳转链接均为可选参数)

    支持的视频属性:

    • autoplay:视频自动播放

    • loop:视频循环播放

    • muted:视频静音播放

    参数说明:

    • 视频地址:必填,支持 MP4、WebM 等 HTML5 支持的视频格式

    • 视频属性:可选,可同时指定多个属性(用逗号分隔)

    • 描述文本:可选,轮播项底部显示的文字说明

    • 跳转链接:可选,点击视频时跳转的目标地址

    示例:

    
    {% carousel %}
      # 仅包含视频
      https://example.com/video1.mp4
      
      # 视频+属性
      https://example.com/video2.mp4, autoplay, muted
      
      # 视频+属性+描述+链接
      https://example.com/video3.mp4, loop, 这是一段示例视频, /video.html
    {% endcarousel %}
    

    3.3 B 站视频类型

    格式:[BV号, 分P页码, 描述文本, 跳转链接]

    (注:分 P 页码默认为 1,描述文本和跳转链接为可选参数)

    参数说明:

    • BV 号:必填,B 站视频的唯一标识符(如 BV1xx411c7mG)

    • 分 P 页码:可选,视频分 P 的页码,默认为 1

    • 描述文本:可选,轮播项底部显示的文字说明

    • 跳转链接:可选,点击视频时跳转的目标地址

    示例:

    {% carousel %}
      # 仅包含B站视频
      BV1xx411c7mG
      
      # B站视频+分P+描述
      BV1xx411c7mG, 2, 这是B站视频的第2P
      
      # B站视频+分P+描述+链接
      BV1xx411c7mG, 3, 点击跳转到B站, https://bilibili.com
    {% endcarousel %}

    4. 显示效果说明

    • 轮播图会自动适应容器宽度,最大宽度为 1000px

    • 所有轮播项会保持相同高度,确保整体美观

    • 底部会显示指示器,点击可直接切换到对应项

    • 左右两侧有切换按钮,点击可切换上一张 / 下一张

    • 鼠标悬停在轮播图上会暂停自动播放,移开后恢复播放

    • 切换轮播项时,当前播放的视频(包括 B 站视频)会自动暂停