网页前端设计

http://www.86y.org

搜索文章

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

用声音读出全文关注我吧
 2014/7/29 16:58:35 阅读次数:8565

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

今天在博客园发现一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

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

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

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

阅读全文内容关闭