文章详细
Nivo Slider-超好用的jQuery图片轮播插件
 2014/7/29 16:58:35 评论:0人 阅读次数:8844

Nivo Slider-超好用的jQuery 图片轮播插件

今天在博客园发现一JQ的图片轮播插件,学习了一下,非常好用,使用起来也超级简单。(底部附下载地址)

特色如下:

  • ✓  16个独特的过渡效果
  • ✓  简洁和有效的标记
  • ✓  加载参数设置
  • ✓  内置方向和导航控制
  • ✓  压缩版本大小只有12KB
  • ✓  支持链接图像
  • ✓  支持 HTML 标题
  • ✓  3套精美光滑的主题
  • ✓  在MIT许可下免费使用
  • ✓  支持响应式设计

浏览器兼容情况

调用方法:

1、在页面head引入css与js:nivo-slider.css,jquery-1.6.4.min.js(JQ1.6.4以上均可),jquery.nivo.slider.pack.js

2、调用方法

最简单的调用方法:

$('#slider').nivoSlider();

可选参数调用方法:

//Slider
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
	effect: 'random',//有以下切换效果
	//sliceDownRight,sliceDownLeft,sliceUpRight,sliceUpLeft,sliceUpDown,sliceUpDownLeft
	//,fold,fade,boxRandom,boxRain,boxRainReverse,boxRainGrow,boxRainGrowReverse'
	slices:15,
	animSpeed:500, //切换速度
	pauseTime:5000,//停留时间
	controlNav: true,//多点选显示 true/false
	directionNavHide: false,//默认隐藏左右按钮,鼠标指向图片上才显示 true/false
	prevText: 'prev', //上一幅按钮的内容
	nextText: 'next',//下一幅按钮的内容
	startSlide:0, // 默认显示第几个图片 (第一张为0 index)
	directionNav:true // 启用左右按钮 true/false
	
	});	
});
//end Slider

DEMO演示地址:http://www.86y.org/DEMO/Nivo%20Slider/
下载地址:http://pan.baidu.com/s/1dFcFzyT 密码: fsce

总之,这次发现的轮播插件功能是比较全而且使用起来非常方便,在此分享给大家使用方法,欢迎大家探讨。

(完)

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=724【Nivo Slider-超好用的jQuery图片轮播插件】幸凡学习网
0
 
相关文章
推荐文章
Created By Charry-May 3,2010
粤ICP备10093478号-1
顶部