带多种过渡动画的响应式jQuery幻灯片插件

Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件。该幻灯片插件内置有16种不同的动画过渡效果。它提供了丰富的参数来控制幻灯片的播放。它使用简单，并且可以兼容IE8浏览器。

使用方法

使用Nivo-Slider幻灯片需要引入nivo-slider.css，jQuery(1.7+)和jquery.nivo.slider.js文件。

<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src=js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>                
              

HTML结构

该响应式幻灯片的HTML结构非常简单，使用一个带#slider的<div>作为容器，里面放置你需要的图片即可。

<div id="slider" class="nivoSlider">
    <img src="images/slide1.jpg" alt="" />
    <a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>                
              

最好在包裹容器上添加class nivoSlider。上面的代码中还展示了如何为图标添加可以带HTML标签的标题效果（例如超链接）。它们的关联关系是在图片的title属性指向作为图片标签的容器div#htmlcaption。

调用插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该幻灯片插件。

<script type="text/javascript">
  $(window).load(function() {
      $('#slider').nivoSlider();
  });
</script>                
              

配置参数

下面是该响应式幻灯片的可用配置参数。

effect可以设置为以下的动画过渡效果：

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random
• slideInRight
• slideInLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

小技巧

使用幻灯片主题

要使用Nivo Slider幻灯片插件提供的各种主题样式，可以按下面操作。首先在页面中引入主题CSS文件。

<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" />              
            

然后需要按下面的格式调整一些你的HTML标签。

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        ...
    </div>
</div>              
            

注意，你可以在页面中引入多个主题CSS样式文件，但是它们不会被显示，直到你在幻灯片包裹容器上设置theme-{theme name}后，该主题才会被启用。

使用缩略图导航

要使用缩略图导航必须确保controlNavThumbs参数设置为true。该参数被启用后，插件会检查图片的data-thumb属性，使用该属性中指定的图片URL作为缩略图。

<div id="slider">
    <img src="images/1.jpg" alt="" data-thumb="images/1_thumb.jpg" />
    <img src="images/2.jpg" alt="" data-thumb="images/2_thumb.jpg" />
    <img src="images/3.jpg" alt="" data-thumb="images/3_thumb.jpg" />
    <img src="images/4.jpg" alt="" data-thumb="images/4_thumb.jpg" />
</div>              
            

自定义每一个slide的动画过渡效果

你可以使用data-transition属性为幻灯片的每一个slide指定它的过渡动画效果，例如：

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />              
            

上面的代码会强制该slide在每次出现的时候都使用slideInLeft过渡动画。