这是一款jQuery四格窗口轮播图插件。该jquery轮播图将一个窗口等分为上下四格，然后将突破分别在四格格子内进行轮播。

使用方法

在页面中引入window.slider.css、jquery和window.slider.js文件。

<link rel="stylesheet" type="text/css" href="window.slider.css"/>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/window.slider.js"></script>
HTML

该jquery轮播图的基本HTML结构如下。

<div id="slider-1" class="window-slider">
    <!-- TOP LEFT SLIDER -->
    <div class="tl-window">
      <img src="pics/1.png">
      <img src="pics/2.jpg">
    </div>
    
    <!-- TOP RIGHT SLIDER -->
    <div class="tr-window">
      <img src="pics/3.jpg">
      <img src="pics/4.jpg">
    </div>
    
    <!-- BOTTOM LEFT SLIDER -->
    <div class="bl-window">
      <img src="pics/5.jpg">
      <img src="pics/6.jpg">
    </div>
    
    <!-- BOTTOM RIGHT SLIDER -->
    <div class="br-window">
      <img src="pics/7.png">
      <img src="pics/8.jpg">
    </div>
</div>
初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery轮播图插件。

$(document).ready(function() {
        $('#slider-1').windowSlider();
    });

配置参数

该jquery轮播图插件可用的配置参数有：

startPosition 1 / 2 / 3 / 4
interval duration in milliseconds
fadeOutSpeed duration in milliseconds
fadeInSpeed duration in milliseconds
cycle ‘standard’ / ‘reverse’ / ‘clockwise’ / ‘counter-clockwise’
  • startPosition：从第几个格子开始轮播。
  • interval：轮播的时间间隔。
  • fadeOutSpeed：淡出的时间。
  • fadeInSpeed：淡入的时间。
  • cycle：循环的方向。

该jquery轮播图插件的github网址为：https://github.com/ajavadi34/window-slider