• 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

    需要注意使用以下一些东西:id=slider,

    <div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
    <img src="images/1.jpg" alt="" title="HTML5 with jQuery plugin Qucksand " />
    <img src="images/2.jpg" alt="" title="HTML5 with jQuery plugin Reel " />
    <img src="images/3.jpg" alt="" data-transition="sliceDown" title="HTML5 with jQuery plugin Qucksand " />
    <img src="images/4.jpg" alt="" title="#htmlcaption" />
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>
    </div>

    </div>
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider({pauseTime: 3000});
    });
    </script>

  • 相关阅读:
    10大开源文档管理系统,知识管理系统
    okhttp原理,okhttp为什么好?
    开放式创新对程序开发有什么深远的影响?
    TypeScript中文手册【从入门到精通】
    CentoOS6 32停更了,如何继续用yum源【解决方案】
    electronic为什么要用JavaScript开发桌面应用
    统一身份认证登录入口,统一用户认证和单点登录解决方案
    PHP数组如何倒叙 array_reverse
    Windows electron开发实例大全
    AI深度学习的基础上处理自然语言
  • 原文地址:https://www.cnblogs.com/jackzzx/p/4599108.html
Copyright © 2020-2023  润新知