一个加载设置拥有9种过度效果的超级smooth slider，它还支持如链接图像和键盘导航等内容。
如何使用：
非常简单 不多说：
<!-- Usually in the <head> section -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- Then somewhere in the <body> section -->
<div id="slider">
<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>
可选参数设置
<script type="text/javascript">// <![CDATA[
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
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>
官方网站：Nivo Slider
SatSun Studio 官方推荐文章
- JSON && Jquery && Codeigniter 使用说明 (特别推荐)
- jquery 插件之xhEditor||一款优秀的XHTML在线编辑器 (特别推荐)
- Jquery Menu 推荐一款经典的树状导航条 (特别推荐)
- Javascript跳转页面和打开新窗口等方法 (特别推荐)
- 随机数--堆排序 (特别推荐)
- 服务器端的 JSON||Ajax 教程 (特别推荐)
- javascript数组 (array)操作全解析 (特别推荐)
- JS截取字符串split() ||join()||substring() ||ndexOf()详解 (特别推荐)
- JS截取字符串substr 和 substring方法详解 (特别推荐)
- js添加动态层||document.createElement("div")动态生成层方法详解 (特别推荐)
- JQuery选择器是如何工作的 (RANDOM - 特别推荐)
I really like that. You touched my heart!
想要整合到小博里。希望能发个方法
额、有预览就更佳了！
其实一直想学jquery 奈何没有时间和精力
你现在从事什么工作啊？？？
测试回复功能。。就是不行啊
可以恢复呀！
我指的邮件回复、、、
想学就去学呀！