Nivoslider中怎么实现图片切换效果-创新互联
本篇文章为大家展示了Nivoslider中怎么实现图片切换效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
在巴州等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站制作 网站设计制作按需搭建网站,公司网站建设,企业网站建设,品牌网站建设,网络营销推广,外贸营销网站建设,巴州网站建设费用合理。HTML
在ID为slider的DIV中,放置了三张需要切换的图片。如果你想给让单击图片时打开一个页面地址,就给图片加个标签链接,如果你想给图片加个标题说明,可以使用title属性,如果你想让标题有样式或者链接,可以将图片的title属性设置为像"#htmlcaption",即#号后面紧跟指向的ID,如上所示代码,在ID为htmlcaption的DIV中,你可以编辑你想要的HTML代码,Nivoslider插件支持html的图片标题。
CSS
首先需要载入插件所需的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;left:300px;bottom:-42px;}
.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库和插件。
然后调用Nivoslider插件。
$(function() {
$('#slider').nivoSlider();
});
这样,一个非常漂亮的图片切换效果就完成了。如果你需要特别的要求可以修改插件的配置参数和方法函数。
Nivoslider插件参数和方法一览表
参数/方法 描述 默认值 基本 effect 图片切换效果。提供了11种效果:'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft',诸如渐入渐出,滑动,百叶窗等等都有。 random animSpeed 图片切换速度(毫秒) 500 pauseTime 图片停留时间(毫秒) 3000 startSlide 开始切换的位置(即从第几张图开始切换)。 0 directionNav 是否使用左右按钮导航 true directionNavHide 是否当鼠标滑上图片时出现左右导航按钮 true controlNav 是否使用导航控制条,即显示每张图片的按钮 true controlNavThumbs 是否使用缩略图控制导航 false controlNavThumbsFromRel 是否使用图片的rel属性关联缩略图 false controlNavThumbsSearch 缩略图类型 '.jpg' controlNavThumbsReplace 缩略图后缀 '_thumb.jpg' keyboardNav 是否支持键盘方向键切换(貌视IE不支持) true pauseOnHover 当鼠标滑向图片时,停止切换 true manualAdvance 是否不自动切换,当为true时,需要手动切换 false captionOpacity 设置图片标题说明的背景透明度 0.8 方法 beforeChange 当发生切换前,回调函数 afterChange 当发生切换后,回调函数 slideshowEnd 完成所有的切换动作后,回调函数 lastSlide 切换最后一张图片时,回调函数 afterLoad 当加载完成时,回调函数
上述内容就是Nivoslider中怎么实现图片切换效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
当前标题:Nivoslider中怎么实现图片切换效果-创新互联
URL分享:http://myzitong.com/article/jceis.html