Getting started with the Nivo Slider jQuery Plugin
谭向晨
Info: http://dev7studios.com/products/nivo-slider-wordpress-plugin
Download: https://github.com/gilbitron/Nivo-Slider
Install files
Installing the Nivo Slider jQuery plugin is actually pretty simple. You just need to add the Following code to the <head> of your web page:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
This will make sure all the required files are loaded properly. If you have the Nivo Slider CSS and Javascript files in a subfolder you will need to add it to the path. Note that the Nivo Slider jQuery plugin requires jQuery v1.7+ to work.
Add markup
The HTML markup for the Nivo Slider is also very simple. You simply need to create a div with an id ( #slider in this case) and add some images to it:
<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><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>
It is good practice to add the nivoSlider class to the #slider div. We've also shown in this example how to set up HTML captions (the title of the img should be id of the div containing the HTML caption).
Hook up the slider
Finally you need to hook up the slider by adding the following code after the three links we included in the <head>:
<script type="text/javascript">
$(window).on('load', function() {
$('#slider').nivoSlider();
});
</script>
Note that the Nivo Slider uses the $(window).on('load', function(){}) function and not $(document).ready() that most other jQuery plugins use.
完整版本示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<!--
如果需要支持老版本的浏览器，那你就必须坚持使用css1的媒体描述符screen和print，到底是哪些老版本的浏览器，没有查。它们是相互排斥的，因此在为屏幕显示而生成页面的时候，浏览器会忽略掉打印样式表，反之亦然。所以，每个样式表都需要包含相同的样式选择器，但是有不同的规则声明，以便为不同的输出设备分别生成页面样式。
<link rel=stylesheet type=text/css media=screen href=xker_com.css /
screen (缺省值)，提交到计算机屏幕；
print， 输出到打印机；
projection，提交到投影机；
aural，扬声器；
braille，提交到凸字触觉感知设备；
tty，电传打字机 (使用固定的字体)；
all，所有输出设备
-->
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<!--在style.css中有#dev7link的设置，其背景是一个张图片-->
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com">
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
</a>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</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>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
/*参考地址：http://www.jq22.com/jquery-info37*/
effect: 'random', // 切换样式 默认为random
slices: 15, // 针对slice样式的切换级数，数字越大切换越慢过渡越小
boxCols: 8, // 针对box样式的切换列数，数字越大切换越慢过渡越小
boxRows: 4, // 针对box样式的切换行数，数字越大切换越慢过渡越小
animSpeed: 500, // 切换动画的速度
pauseTime: 3000, // 相邻两张幻灯片切换的间隔时间
startSlide: 0, // 从第几张图片开始切换
directionNav: true, // 是否显示‘上一张/下一张’导航
controlNav: true, // 1,2,3... navigation 是否显示数字导航
controlNavThumbs: false, // Use thumbnails for Control Nav 是否用缩略图导航
pauseOnHover: true, // Stop animation while hovering 当鼠标移到幻灯片上的时候是否暂停切换
manualAdvance: false, // Force manual transitions 是否强制手动切换
prevText: 'Prev', // Prev directionNav text ’上一张‘的文字
nextText: 'Next', // Next directionNav text ’下一张‘的文字
randomStart: false, // Start on a random slide 是否从一张随机的图片开始切换
beforeChange: function() {}, // Triggers before a slide transition 在幻灯片切换之前的回调函数
afterChange: function() {}, // Triggers after a slide transition
slideshowEnd: function() {}, // Triggers after all slides have been shown
lastSlide: function() {}, // Triggers when last slide is shown
afterLoad: function() {} // Triggers when slider has loaded
});
});
</script>
</body>
</html>
类似资料：