如何在nivo-slider中设置不同的效果

Question

我在我的网站上有一个nivo-slider，但除了slidesUp之外没有任何效果，即使我已经设置了默认安装。

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

  <img src="/upload/banners/image1.png" border="0" alt=""/>
  <img src="/upload/banners/image2.png" border="0" alt=""/>
  <img src="/upload/banners/image3.png" border="0" alt=""/>  

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

在标题中：

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

我应该怎么做才能让它正常工作？

Answer 1

zeusakm。检查您的代码并查找以下内容：

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

你必须调用“effect”选项，然后才能设置它。如何？：

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

effect参数可以是以下任一参数：

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

完整参考：http://nivo.dev7studios.com/#usage

Answer 2

脚本的顺序显然也很重要：

1. jQuery JS文件必须链接到您的HTML文件中的某个位置。
2. Nivo幻灯片JS文件必须在jQuery JS效果控件(如"effect:'fade'")必须位于Nivo幻灯片JS文件之后的脚本标记中之后才能链接。

提供更多控制的一种简单的变通办法或替代方案是指定

<img src="mypic.jpg" alt="" data-transition="fade"/>

它还可以让您指定每个图片的效果。