jQuery和css3全屏背景模糊的轮播图插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery和css3全屏背景模糊的轮播图插件
jQuery和css3全屏背景模糊的轮播图插件
分享:

    插件介绍

    这是一款效果非常酷的jQuery和css3全屏背景模糊的轮播图插件。该轮播图插件在图片切换的时候,页面背景也会切换到该图片的大图,并将该大图片使用CSS进行模糊处理,效果非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-30
    阅读:
简要教程

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