jQuery四格窗口轮播图插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery四格窗口轮播图插件
jQuery四格窗口轮播图插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-11-14
    阅读:
简要教程

这是一款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