📌  相关文章
📜  缓慢的图像更改幻灯片语义 ui (1)

📅  最后修改于: 2023-12-03 15:41:18.887000             🧑  作者: Mango

缓慢的图像更改幻灯片语义 UI

简介

缓慢的图像更改幻灯片语义 UI 是一个用于创建炫酷的幻灯片的开源 UI 库。它利用 CSS3 动画和 jQuery 动态效果，以缓慢的方式更改幻灯片的图像，从而为用户带来优秀的 UI 体验。

特性
  • 支持动态更改幻灯片的图像
  • 支持选择不同的过渡效果
  • 支持幻灯片上下滚动、左右滚动和淡入淡出效果
  • 支持设置每一张幻灯片的时长
  • 支持多种主题风格
效果预览

用法
引入

在 HTML 文件中引入 CSS 和 JavaScript 文件。

<head>
  <link rel="stylesheet" href="slow-image-change-slideshow-semantic-ui.css">
</head>
<body>
  <div class="slideshow">
    <div class="slide">
      <img src="https://i.imgur.com/Yo8Pch0.png">
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="slow-image-change-slideshow-semantic-ui.js"></script>
</body>
HTML 结构

必须使用以下 HTML 结构：

<div class="slideshow">
  <div class="slide">
    <img src="...">
  </div>
  <div class="slide">
    <img src="...">
  </div>
  ...
</div>
初始化

在 JavaScript 文件中使用以下代码初始化幻灯片：

$('.slideshow').slowImageChangeSlideshowSemanticUI();
配置选项

可以使用以下选项配置幻灯片：

$('.slideshow').slowImageChangeSlideshowSemanticUI({
  transitionType: 'fade',
  transitionTime: 3000,
  theme: 'default'
});

| 选项名称 | 类型 | 默认值 | 描述 | | ---------------- | ------- | -------- | ------------------------------------------------------------ | | transitionType | string | 'slide' | 过渡效果，支持 'slide'、'fade' 和 'flip' | | transitionTime | number | 5000 | 幻灯片每张图片的停留时间，以毫秒为单位 | | theme | string | 'default'| 主题名称，支持 'default'、'minimal' 和 'dark' |

支持的浏览器
  • Internet Explorer 10+
  • Microsoft Edge
  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
贡献与反馈
  • 项目主页：https://github.com/Yukaii/Slow-Image-Change-Slideshow-Semantic-UI
  • 提交 issue：https://github.com/Yukaii/Slow-Image-Change-Slideshow-Semantic-UI/issues
  • 贡献代码：请 fork 本项目并提交 pull request。