Nivo Slider 为jquery 和wordpress 打造的多种焦点图切换方式插件
Nivo slider :官方地址:http://nivo.dev7studios.com
demo 样式 地址:http://nivo.dev7studios.com/demos/
div +css 请参照原文 ,这里不做详细的介绍
jquery插件 方法介绍地址:http://nivo.dev7studios.com/support/jquery-plugin-usage/
nivoslider.js原文 jquery 默认方法
<script type="text/javascript">
$(window).load(function () {
$('#slider').nivoSlider({
effect: 'random', // effect过渡效果图片切换效果。
slices: 15, // effect为切片效果时的数量
boxCols: 8, // For box animations 盒装动画 默认8列
boxRows: 4, // For box animations 盒式动画 默认四行 (还没搞懂神马,在运行百叶窗时 有这个四行八列的效果。应该是控制这个的)
animSpeed: 500, // Slide transition speed 动画切换速度(毫秒)
pauseTime: 3000, // How long each slide will show图片切换间隔时间(毫秒)
startSlide: 0, // Set starting Slide (0 index) 图片切换开始图片编号
directionNav: true, // Next & Prev navigation 是否显示图片切换左右按钮
directionNavHide: true, // Only show on hover 是否鼠标在图片上才显示左右切换按钮
controlNav: true, // 1,2,3... navigation 显示序列导航 即显示每张图片的按钮
controlNavThumbs: false, // Use thumbnails for Control Nav 是否使用缩略图控制导航
pauseOnHover: true, // Stop animation while hovering 当鼠标滑向图片时,停止切换
manualAdvance: false, // Force manual transitions 是否不自动切换,false为自动切换,当为true时,需要手动切换
prevText: 'Prev', // Prev directionNav text 上一张图片
nextText: 'Next', // Next directionNav text 下一张图片
randomStart: false, // Start on a random slide 随机开始(暂时没搞懂这个参数的意义)
//好像还有以下一些参数,官方3.1好像还有没有罗列的参数controlNavThumbsFromRel: false, // 使用img的rel属性作为缩略图地址
controlNavThumbsSearch: ".jpg", // 缩略图的类型
controlNavThumbsReplace: "_thumb.jpg", //缩略图后缀
keyboardNav: true, //是否支持键盘方向键切换(貌视IE不支持)
captionOpacity: 0.5, //设置图片标题说明的背景透明度 ,这个很实用
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>