jquery.Nivoslider.js强大的图片轮播插件_网页滚动图片特效,jquery图片滚动,js图片无缝滚动,图片轮播免费下载_188bet网 - 提供下载各种免费建站资源,免费网站模板,免费网页特效,46g建站宝库
当前位置:模板网首页 > 特效插件 > 滚动轮播 >  jquery.Nivoslider.js强大的正文

jquery.Nivoslider.js强大的图片轮播插件

作者:网页模板
大小:0.37MB
点击次数:
发布时间:2017-11-17 21:23
分享到:

特效介绍

jquery.Nivoslider.js
jquery.Nivoslider.js

        Nivoslider是一款基于jQuery的,能实现多种切换效果的图片切换插件。Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本。目前下载量已经突破 1,800,000 次!支持多种参数配置和方法函数调用,使用简单,是一款非常理想的图片切换插件。jQuery 独立版本的插件主要有如下特色:

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

使用方法

1、引入nivo-slider.css
<link rel="stylesheet" type="text/css" href="nivo-slider.css" />

2、然后设置展示插件所需的样式,像控制导航键,导航按钮样式,当然你可以自己写个样式,代码参照如下:
#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;}

3、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的图片标题。

4、jQuery(先载入jQuery库和插件)
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

5、然后调用Nivoslider插件:
<script type="text/javascript">
$(function() {
     $('#slider').nivoSlider();
});
</script>

    这样,一个非常漂亮的图片切换效果就完成了。如果你需要特别的要求可以修改插件的配置参数和方法函数。

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
jQuery 3D效果的幻灯片插件
基于jQuery的全屏滚动:fullPage.js插件