Accordion风格 水平滑块插件 jQuery Accordion.js

  • 源码大小:833.81KB
  • 所需积分:1积分
  • 源码编号:19JP-3158
  • 浏览次数:1230次
  • 最后更新:2023年05月12日
  • 所属栏目:手风琴效果
本站默认解压密码:19jp.com 或 19jp_com

简介

一个小巧易用的jQuery插件,用于从一组图像中创建手风琴式的水平滑块。将鼠标悬停在幻灯片上会将图像扩展到全宽,就像传统的手风琴一样。

参见:

  • JavaScript或纯CSS中的10个最佳手风琴滑块

如何使用它:

1.创建一个空的DIV来固定手风琴滑块。

  1. <div id="demo">
  2. </div>

2.在jQuery之后加载Accordi.js。

  1. <script src="/path/to/cdn/jquery.min.js"></script>
  2. <script src="/path/to/js/accordion.js"></script>

3.初始化插件并将您的图像数据存储在JS数组中,如下所示:

  1. $.as({
  2. id: "demo",
  3. folder: "images",
  4. images: ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"],
  5. imgWidth: 700,
  6. });

4.配置动画速度

  1. $.as({
  2. id: "demo",
  3. folder: "images",
  4. images: ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"],
  5. imgWidth: 700,
  6. speed: 2000,
  7. });

预览截图