网页前端设计

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

特色如下：

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

浏览器兼容情况

• ✓  Internet Explorer v7+
• ✓  Firefox v3+
• ✓  Google Chrome v4
• ✓  Safari v4
• ✓  Opera v10.5

调用方法：

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

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

(完)

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)