这是一款jQuery和css3全屏背景模糊的轮播图插件。这个轮播图插件的灵感来自于Google's TV website。

HTML结构

要使用这个轮播图插件，需要在html的头部引入jQuery和jquery.immersive-slider.js以及immersive-slider.css文件。

<div class="main">
  ...
  <div id="immersive_slider">
    <div class="slide" data-blurred="<<background-image-url>>">
      ...
    </div>
    <div class="slide" data-blurred="<<background-image-url>>">
      ...
    </div>

    ...

    <a href="#" class="is-prev">&laquo;</a>
    <a href="#" class="is-next">&raquo;</a>
  </div>
</div>

容器.main将被用于显示模糊背景图像。你可以在.immersive_slider中放置你喜欢的多张轮播图。不要忘记将data-blurred修改为模糊图片的URL。

JAVASCRIPT

通过下面的jQuery代码来调用插件：

$("#immersive_slider").immersive_slider({
  animation: "fade",
  slideSelector: ".slide",
  container: ".main",
  cssBlur: false,
  pagination: true,
  loop: true,
  autoStart: 5000
});

下面来说明一下这些参数：

  • animation：该参数用于设置轮播图的动画效果。对于水平轮播图，可以设置的值有：“fade”, “slide”, “bounce”。对于垂直轮播图，你可以设置：“slideUp”或“bounceUp”。默认值是“slide”。
  • slideSelector：如果你的页面中已经使用了.slide这个class，你可以通过该参数来自定义轮播图的class。
  • container：该参数用于定义背景图像模糊容器。在上面的设置中，背景模糊容器为.main的div。你可以自定义它，但是一定要确保它包裹着轮播图。
  • cssBlur：这是一个实验性的参数。如果你不想在每一个轮播图上都使用新的data-blurred属性，你可以设置它为true。
  • pagination：该参数设置是否使用分页，true为使用。
  • loop：该参数用于设置轮播图是否循环。默认为true。
  • autoStart：该参数用于设置轮播图自动播放的时间间隔。设置为0或flase则表示不自动播放。默认值为5000ms。

实验性的属性：CSSBlur

这个插件可以模糊图像，将它们作为背景图片，而无需你为每一个轮播图的图片都设置背景图。它使用的是CSS3的Filter，但它只能在Chrome上工作。如果你想试一下这个功能，按下面操作：

<div class="main">
  ...
  <div id="immersive_slider">
    <div class="slide">
      <img src="<<background-image-url>>">
      ...
    </div>
    <div class="slide">
      <img src="<<background-image-url>>">
      ...
    </div>
    ...
  </div>
</div>
JS
$("#immersive_slider").immersive_slider({
  cssBlur: true
});

现在，轮播图插件将使用它找到的第一张图和CSS3来制作背景模糊效果。

公共方法

为了使开发者更加容易控制这个轮播图插件，插件中添加了几个用于控制前后轮播的公共方法。

  • $.fn.moveNext()

    该方法可以导航到下一张轮播图片。

    $("#immersive_slider").mmoveNextoveUp();

  • $.fn.movePrev()

    该方法可以导航到前一张轮播图片。

    $("#immersive_slider").movePrev();