Javascript 如何在 nivo-slider 中设置不同的效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6511074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set different effects in nivo-slider
提问by Arthur Kushman
I've got a nivo-slider on my site, but there aren't any effects except slidesUp, even though I have set the default installation.
我的网站上有一个 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>
and in header:
并在标题中：
<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"/>
What should I do to make it works properly?
我应该怎么做才能使其正常工作？
回答by Carlos
zeusakm. Check your code and look for this:
泽萨克姆。检查您的代码并查找：
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
You have to call the 'effect' option and then you can set it. How?:
您必须调用“效果”选项，然后才能设置它。如何？：
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random'
});
});
</script>
The effect parameter can be any of the following:
效果参数可以是以下任何一个：
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
- 向下切片
- 左切片
- 切片
- 左切片
- 向上切片
- 切片上下左
- 折叠
- 褪色
- 随机的
- 向右滑动
- 向左滑动
- 盒子随机
- 盒子雨
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
Complete reference: http://nivo.dev7studios.com/#usage
回答by John
Also the order of the scripts apparently matter:
脚本的顺序也很重要：
- jQuery JS file must be linked somewhere in your HTML file.
- Nivo Slider JS file must be linked AFTER the jQuery JS file.
- Slider-specific controls (such as "effect:'fade'") must be in script tags AFTER the Nivo Slider JS file.
- jQuery JS 文件必须链接到 HTML 文件中的某个位置。
- Nivo Slider JS 文件必须在 jQuery JS 文件之后链接。
- 特定于滑块的控件（例如“效果：‘淡入淡出’”）必须位于 Nivo Slider JS 文件之后的脚本标签中。
An easy worksround or alternative providing more control is to specify
一个简单的解决方法或提供更多控制的替代方法是指定
<img src="mypic.jpg" alt="" data-transition="fade"/>
which also lets you specify the effect per picture.
它还允许您指定每张图片的效果。
