jQuery四格窗口轮播图特效插件

jQuery四格窗口轮播图特效插件

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

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

1
2
3
<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结构如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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轮播图插件。

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

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

1
2
3
4
5
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:循环的方向。
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论