jquery.Nivoslider.js丰富图片插件参数详解
来源:互联网 发布:猎受追缉by焉知冷暖 编辑:程序博客网 时间:2024/05/16 10:34
ivoslider是一款基于jQuery的,能实现多种切换效果的图片切换插件。Nivoslider提供了11种切换效果,支持多种参数配置和方法函数调用,使用简单,是一款非常理想的图片切换插件。
注:Nivoslider运用功能如下:
9独特效果;
简单的清除及有效标记;
载入设置及调整;
内建方向和控制导航;
打包的版本只有7KB;
支援连接影像;
键盘导航;
HTML结构:
<div id="slider" class="nivoSlider"> <a href="javascript:void(0);"><img src="images/s1.jpg" alt="" title="好漂亮的狗狗..." /></a> <a href="javascript:void(0);"><img src="images/s2.jpg" alt="" title="图片标题..." /></a> <a href="javascript:void(0);"><img src="images/s3.jpg" alt="" title="#htmlcaption" /></a></div><div id="htmlcaption" class="nivo-html-caption"> <strong>图片标题</strong>,支持HTML标签 <a href="http://www.helloweba.com">helloweba.com</a>.</div>
在ID为slider的DIV中,放置了三张需要切换的图片。如果你想给让单击图片时打开一个页面地址,就给图片加个 <a>
标签链接,如果你想给图片加个标题说明,可以使用title属性,如果你想让标题有样式或者链接,可以将图片的title属性设置为像”#htmlcaption”,即#号后面紧跟指向的ID,如上所示代码,在ID为htmlcaption的DIV中,你可以编辑你想要的HTML代码,Nivoslider插件支持html的图片标题。
CSS样式(首先需要载入插件所需的CSS文件。)
<link rel="stylesheet" type="text/css" href="nivo-slider.css" />
然后设置展示插件所需的样式,像控制导航键,导航按钮样式,当然你可以自己写个样式,代码参照如下:
#slider{width:680px; height:272px; margin:40px auto;background:url(images/loading.gif) no-repeat 50% 50%;}#slider img {position:absolute;top:0px;left:0px;display:none;}.nivo-controlNav{position:absolute; right:5px;bottom:0px;}.nivo-controlNav a {display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}.nivo-controlNav a.active {background-position:0 -22px;}.nivo-directionNav a {display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;}a.nivo-nextNav {background-position:-30px 0;right:15px;}a.nivo-prevNav {left:15px;}.nivo-caption {text-shadow:none; font-family: Helvetica, Arial, sans-serif;}.nivo-caption a {color:#efe9d1;text-decoration:underline;}
jQuery(先载入jQuery库和插件。)
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
然后调用Nivoslider插件。
<script type="text/javascript">$(function() { $('#slider').nivoSlider();});</script>
这样,一个非常漂亮的图片切换效果就完成了。如果你需要特别的要求可以修改插件的配置参数和方法函数。
Nivoslider插件参数和方法一览表
参数/方法描述默认值基本effect图片切换效果。提供了11种效果:’sliceDownRight’,’sliceDownLeft’,’sliceUpRight’,’sliceUpLeft’, ‘sliceUpDown’,’sliceUpDownLeft’, ‘fold’,’fade’,’slideInRight’,’slideInLeft’,诸如渐入渐出,滑动,百叶窗等等都有。randomanimSpeed图片切换速度(毫秒)500pauseTime图片停留时间(毫秒)3000startSlide开始切换的位置(即从第几张图开始切换)。0directionNav是否使用左右按钮导航truedirectionNavHide是否当鼠标滑上图片时出现左右导航按钮truecontrolNav是否使用导航控制条,即显示每张图片的按钮truecontrolNavThumbs是否使用缩略图控制导航falsecontrolNavThumbsFromRel是否使用图片的rel属性关联缩略图falsecontrolNavThumbsSearch缩略图类型‘.jpg’controlNavThumbsReplace缩略图后缀‘_thumb.jpg’keyboardNav是否支持键盘方向键切换(貌视IE不支持)truepauseOnHover当鼠标滑向图片时,停止切换truemanualAdvance是否不自动切换,当为true时,需要手动切换falsecaptionOpacity设置图片标题说明的背景透明度0.8方法beforeChange当发生切换前,回调函数 afterChange当发生切换后,回调函数 slideshowEnd完成所有的切换动作后,回调函数 lastSlide切换最后一张图片时,回调函数 afterLoad当加载完成时,回调函数 0 0
- jquery.Nivoslider.js丰富图片插件参数详解
- jquery图片切换插件-NivoSlider.js
- Nivoslider:丰富的图片切换效果
- Nivoslider:丰富的图片切换效果
- Nivoslider:丰富的图片切换效果
- Nivoslider:丰富的图片切换效果
- jquery图片切换插件jquery.cycle.js参数详解
- jquery图片切换插件jquery.cycle.js参数详解
- jquery 插件(一) nivoslider
- query图片切换插件jquery.cycle.js参数详解
- 图片切换插件jquery.cycle.js参数详解
- Jquery.LazyLoad.js插件参数详解:
- jquery图表插件morris.js参数详解
- 基于jquery的图片懒加载:LazyLoad插件参数详解
- 基于jquery的图片懒加载:LazyLoad插件参数详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的jQuery插件lazyload.js 使用方法详解
- 爱普生打印机打印乱针与不自动到撕纸处处理办法
- 听说API大赛有神奇作品出现?
- Oracle启动出现了ORA-00119,ORA-00130
- Java面向对象设计模式(十五)——观察者模式(Observer)
- 带着老爸老妈游太湖园博园
- jquery.Nivoslider.js丰富图片插件参数详解
- Eclipse智能提示及快捷键
- 湖北荆州刘氏族谱:士昌人运启,维宜守天则。
- Android 匿名共享内存C接口分析
- sql中 limit 和 top
- 编程笔记网址
- Android 6.0 AppOps 简介
- Linux内核sk_buff结构分析
- Oracle备份与恢复方案设计及运维:23个典型问题解答及经验分享