一个jQuery插件，可以帮助您创建响应灵敏、触摸友好、支持视网膜的手风琴滑块，用于在页面上显示任何内容。

更多功能：

• 图像延迟加载。
• 动态内容加载：JSON或XML。
• 允许在同一面板上放置多个图层。
• 平滑过渡。
• 寻呼子弹。
• 支持Youtube/Vimeo/Sublime/HTML5视频。
• 键盘和鼠标交互。
• 可以与任何灯箱插件集成，如已知的FancyBox。
• 支持深度链接。

目录：

• 懒惰加载和视网膜支持
• 图层类型和选项
• 从JSON加载内容
• 从XML加载内容
• 智能视频
• 插件选项
• API方法
• 事件

如何使用它:

1.安装Accordion Slider jQuery插件。

<link rel="stylesheet" href="../dist/css/accordion-slider.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/jquery.accordionSlider.min.js"></script>

2.在手风琴滑块上添加面板。

<div id="example" class="accordion-slider">
  <div class="as-panels">
    <div class="as-panel">
      <img class="as-background" src="1.jpg" />
    </div>
    <div class="as-panel">
      <img class="as-background" src="2.jpg" />
    </div>
    <div class="as-panel">
      <img class="as-background" src="3.jpg" />
    </div>
    <div class="as-panel">
      <img class="as-background" src="4.jpg" />
    </div>
    <div class="as-panel">
      <img class="as-background" src="5.jpg" />
    </div>
  </div>
</div>

3.初始化父容器上的插件，生成一个基本的手风琴滑块。

$('#example').accordionSlider({
  // options here
});

4.启用延迟加载和高分辨率/视网膜图像。

<img class="as-background" 
     src="./dist/css/images/blank.gif" 
     data-src="/path/to/original/image.jpg" 
     data-retina="/path/to/original/[email protected]" />

5.使用以下CSS类和HTML将多层添加到手风琴面板数据属性。

• 打开时：只有当面板打开时，该层才可见。
• 关闭时：只有当面板关闭时，层才会可见。
• 黑色：黑色背景。
• 白色：浅色背景。
• 作为填充：在图层中添加10倍的填充。
• 圆形：圆角。
• 垂直：将图层的方向设置为垂直。
• 背景打开时：打开面板时交换背景图像
• 数据宽度：层的宽度。
• 数据高度：层的高度。
• 数据深度：Z索引CSS属性。
• 数据位置：“topLeft”（默认值）、“topRight”、“bottomLeft”或“bottomRight”
• 横向数据：固定值、百分比值或“中心”。
• 垂直数据：与“水平数据”相同。
• 数据显示转换：“左”、“右”、“上”或“下”。
• 数据隐藏转换：与“数据显示转换”相同。
• 数据显示偏移：向图层添加偏移。
• 数据隐藏偏移：向图层添加偏移。
• 数据显示持续时间：过渡的持续时间。
• 数据隐藏持续时间：过渡的持续时间。
• 数据显示延迟：过渡延迟。
• 数据隐藏延迟：过渡延迟。

<div class="as-panel">
  <a href="http://bqworks.com">
    <img class="as-background" src="../dist/css/images/blank.gif" data-src="https://source.unsplash.com/700x500/?summer" data-retina="https://source.unsplash.com/700x500/?summer"/>
  </a>
  <div class="as-layer as-closed as-white as-vertical panel-counter"
     data-position="bottomLeft" data-horizontal="8" data-vertical="8">
     Panel 2
  </div>
  <div class="as-layer" 
    data-position="bottomLeft" data-horizontal="20" data-vertical="20" data-width="100%">
    <p class="as-layer as-opened as-white as-padding"
      data-position="bottomLeft"
      data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
      Lorem ipsum
    </p>
    <p class="as-layer as-opened as-black as-padding hide-small-screen"
      data-position="bottomLeft" data-horizontal="120"
      data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
      dolor sit amet
    </p>
    <p class="as-layer as-opened as-white as-padding hide-small-screen"
      data-position="bottomLeft" data-horizontal="245"
      data-show-transition="left" data-hide-transition="up" data-show-delay="800">
      consectetur adipisicing elit.
    </p>
  </div>
</div>

6.从JSON加载内容。

$('#example').accordionSlider({
  JSONSource: '/path/to/accordion.json',
});

// accordion.json
{
  "accordion": {
    "panels": [
      {
        "background": {"source": "/path/to/1.jpg"},
        "backgroundRetina": {"source": "path/to/[email protected]"},
        "backgroundOpened": {"source": "path/to/alt1.jpg"},
        "backgroundOpenedRetina": {"source": "path/to/[email protected]"},
        "backgroundLink": {"address": "https://jqueryscript.net"},
        "layers": [
          {"content": "Panel 1", "style": "closed white padding panel-counter", "position": "bottomLeft", "horizontal": "8", "vertical": "8"},
          {"content": "Lorem ipsum dolor sit amet", "style": "opened black padding", "showTransition": "down", "hideTransition": "up", "horizontal": "20", "vertical": "20"}
        ]
      },
      //...
    ]
  }
}

7.从XML加载内容。

$('#example').accordionSlider({
  JSONSource: '/path/to/accordion.xml',
});

<!-- accordion.xml -->
<accordion>
  <panel>
    <background>path/to/1.jpg</background>
    <backgroundRetina>path/to/[email protected]</backgroundRetina>
    <backgroundOpened>path/to/1.jpg</backgroundOpened>
    <backgroundOpenedRetina>path/to/[email protected]</backgroundOpenedRetina>
    <backgroundLink>https://jqueryscript.net/</backgroundLink>
    <layer vertical="8" horizontal="8" position="bottomLeft" style="closed white vertical panel-counter">Panel 1 </layer>
    <layer vertical="10%" horizontal="40" style="opened black padding" hideTransition="left" showTransition="left">Lorem ipsum dolor sit amet </layer>
    <layer vertical="22%" horizontal="40" style="opened white padding" hideTransition="left" showTransition="left" hideDelay="200" showDelay="200">consectetur adipisicing elit </layer>
    <layer vertical="34%" horizontal="40" style="opened black padding" hideTransition="left" showTransition="left" hideDelay="500" showDelay="400" width="350">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </layer>
  </panel>
  ...
</accordion>

8.它还支持Youtube/Vimeo/Sublime/HTML5视频。

<!-- Youtube -->
<iframe class="as-video" src="https://www.youtube.com/embed/VIDEO-ID?enablejsapi=1&amp;wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>
 
<!-- Vimeo -->
<iframe class="as-video" src="https://player.vimeo.com/video/VIDEO-ID?api=1" width="500" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 
<!-- HTML5 Video -->
<video class="as-video" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
  <source src="path/to/video.mp4" type="video/mp4"/>
  <source src="path/to/video.ogv" type="video/ogg"/>
</video>
 
<!-- Video.js -->
<div class="as-video" data-videojs-id="video1">
  <video id="video1" class="video-js vjs-default-skin" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none" data-setup="{}">
    <source src="path/to/video.mp4" type="video/mp4"/>
    <source src="path/to/video.ogv" type="video/ogg"/>
  </video>
</div>
 
<!-- Sublime Video -->
<video id="video2" class="as-video sublime" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
  <source src="path/to/video.mp4" type="video/mp4"/>
  <source src="path/to/video.ogv" type="video/ogg"/>
</video>

9.完整的插件选项。

$('#example').accordionSlider({
 
  // width/height
  width: 800,
  height: 400,
 
  // enable responsive layout
  responsive: true,
 
  // 'auto' or 'custom'
  responsiveMode: 'auto',
 
  // aspect ratio
  aspectRatio: -1,
 
  // 'horizontal' or 'vertical'.
  orientation: 'horizontal',
 
  // 0 for the first panel
  startPanel: -1,
 
  // the size of the opened panel
  // fixed or percentage value
  openedPanelSize: 'max',
 
  // max size of opened panel
  maxOpenedPanelSize: '80%',
 
  // 'hover', 'click', or 'never'
  openPanelOn: 'hover',
 
  // close the opened panels on mouse out
  closePanelsOnMouseOut: true,
 
  // the delay in milliseconds between the movement of the mouse pointer and the opening of the panel
  mouseDelay: 200,
 
  // the distance between consecutive panels
  panelDistance: 0,
 
  // duration on ms
  openPanelDuration: 700,
  closePanelDuration: 700,
  pageScrollDuration: 500,
 
  // easing function
  pageScrollEasing: 'swing',
 
  /* e.g.
  {
    960: {visiblePanels: 5},
    800: {visiblePanels: 3, orientation: 'vertical', width: 600, height: 500},
    650: {visiblePanels: 4},
    500: {visiblePanels: 3, orientation: 'vertical', aspectRatio: 1.2}
  }/* 
  breakpoints: null,
 
  // visible panels
  visiblePanels: -1,
 
  // 0 for the first page
  startPage: 0,
 
  // adds shadow to the accordion slider
  shadow: true,
 
  // determines if the panels will be shuffled/randomized
  shuffle: false,
 
  // determines if the panels will be overlapped
  panelOverlap: true,
 
  // autoplay options
  autoplay: true,
  autoplayDelay: 5000,
  autoplayDirection: 'normal', // 'normal' or 'backwards
  autoplayOnHover: 'pause', // 'pause', 'stop' or 'none'
 
  // keyboard options
  keyboard: true,
  keyboardOnlyOnFocus: false,
  keyboardTarget: 'panel', // 'panel' or 'page',
 
  // mousewheel options
  mouseWheel: true,
  mouseWheelSensitivity: 10,
  mouseWheelTarget: 'panel', // 'panel' or 'page'
 
  // swap background options
  swapBackgroundDuration: 700,
  fadeOutBackground: false,
 
  // touch swipe opitons
  touchSwipe: true,
  touchSwipeThreshold: 50,
 
  // 'playVideo' or 'none'
  openPanelVideoAction: 'playVideo',
 
  // 'pauseVideo' or 'stopVideo'
  closePanelVideoAction: 'pauseVideo',
 
  // 'stopAutoplay' or 'none'
  playVideoAction: 'stopAutoplay',
 
  // 'startAutoplay' or 'none'
  pauseVideoAction: 'none',
 
  // 'startAutoplay', 'nextPanel', 'replayVideo' or 'none'
  endVideoAction: 'none',
 
  // callback functions
  // or $('#example').on('callbackName', function(event) {})
  init: function() {},
  update: function() {},
  accordionMouseOver: function() {},
  accordionMouseOut: function() {},
  panelClick: function(index) {},
  panelMouseOver: function(index) {},
  panelMouseOut: function(index) {},
  panelOpen: function(index, previousIndex) {},
  panelsClose: function(previousIndex) {},
  pageScroll: function(index) {},
  panelOpenComplete: function(index) {},
  panelsCloseComplete: function(previousIndex) {},
  pageScrollComplete: function(index) {},
  breakpointReach: function(size, settings) {},
  videoPlay: function() {},
  videoPause: function() {},
  videoEnd: function() {},
 
});

10.API方法。

// $('#example').accordionSlider('methodName', value);
// or 
// var accordion = $('#example').data('accordionSlider');
// accordion.methodName(value);
 
// Returns all the data of the panel at the specified index.
accordion.getPanelAt(index);
 
// Returns the index of the current panel.
accordion.getCurrentIndex();
 
// Returns the total number of panels.
accordion.getTotalPanels();
 
// Opens the next panel.
accordion.nextPanel();
 
// Opens the previous panel.
accordion.previousPanel();
 
// Opens the panel at the specified index.
accordion.openPanel(index);
 
// Closes all panels.
accordion.closePanels();
 
// Gets the number of visible panels.
accordion.getVisiblePanels();
 
// Gets the number of pages.
accordion.getTotalPages();
 
// Gets the index of the page currently displayed.
accordion.getCurrentPage();
 
// Scrolls to the specified page.
accordion.gotoPage(index);
 
// Goes to the next page.
accordion.nextPage();
 
// Goes to the previous page.
accordion.previousPage();
 
// Destroy
accordion.destroy();
 
// Updates the accordion
accordion.update();
 
// Removes all panels
accordion.removePanels();
 
// resize the accordion slider
accordion.resize();

10.事件。

// $('#example').on(eventType, callback);
// $('#example').off(eventType);
 
$('#example').on('init', function(event) {
  // do something
});
 
$('#example').on('update', function(event) {
  // do something
});
 
$('#example').on('accordionMouseOver', function(event) {
  // do something
});
 
$('#example').on('accordionMouseOut', function(event) {
  // do something
});
 
$('#example').on('panelClick', function(event, index) {
  // do something
});
 
$('#example').on('panelMouseOver', function(event, index) {
  // do something
});
 
$('#example').on('panelMouseOut', function(index) {
  // do something
});
 
$('#example').on('panelOpen', function(event, index, previousIndex) {
  // do something
});
 
$('#example').on('panelsClose', function(event, previousIndex) {
  // do something
});
 
$('#example').on('pageScroll', function(event, index) {
  // do something
});
 
$('#example').on('panelOpenComplete', function(event, index) {
  // do something
});
 
$('#example').on('panelsCloseComplete', function(event, previousIndex) {
  // do something
});
 
$('#example').on('pageScrollComplete', function(event, index) {
  // do something
});
 
$('#example').on('breakpointReach', function(event, size, settings) {
  // do something
});
 
$('#example').on('videoPlay', function(event) {
  // do something
});
 
$('#example').on('videoPause', function(event) {
  // do something
});
 
$('#example').on('videoEnd', function(event) {
  // do something
});

更新日志：

2022-12-16

• 恢复触摸滑动模块中的代码更改

预览截图

jQuery中功能丰富 手风琴滑块