`
shirlly
  • 浏览: 1647881 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

【转】jQuery插件推荐:集合多种过渡效果幻灯片插件 Nivo Slider

 
阅读更多
这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了…… 插件同时还支持缩略图导航以及键盘控制。





参数列表:

  effect: 'random',// 过渡效果
   slices: 15,
   boxCols: 8,
   boxRows: 4,
   animSpeed: 500,
   pauseTime: 3000,
   startSlide: 0, // 第几张开始,从0开始计算
   directionNav: true, // 是否显示上一张下一张按钮
   directionNavHide: true, // 是否只在经过时显示
   controlNav: true, // 序列导航:1、2、3、4...
   controlNavThumbs: false, // 图片导航
   controlNavThumbsFromRel: false, // 使用img的rel属性作为缩略图地址
   controlNavThumbsSearch: '.jpg', // 查找这个字符串...然后...
   controlNavThumbsReplace: '_thumb.jpg', // ...然后用这个字符串代替于缩略图的src
   keyboardNav: true, // 键盘控制(左右箭头)
   pauseOnHover: true, // 鼠标经过时暂停轮播
   manualAdvance: false, // 强制手动转换
   captionOpacity: 0.8,
   prevText: 'Prev',
   nextText: 'Next',
   beforeChange: function(){},
   afterChange: function(){},
   slideshowEnd: function(){}, // 所有显示完毕后触发
   lastSlide: function(){}, // 最后一张图显示时触发
   afterLoad: function(){} // 加载完毕时触发

转自:http://dtop.powereasy.net/Item/147.aspx
分享到:
评论

相关推荐

    jQuery幻灯插件:Nivo Slider

    如果你需要演示新产品,或者你需要比较酷的幻灯片转化效果,Nivo幻灯是你的一个选择之一: 号称世界最棒的jQuery幻灯插件 16种幻灯变化的特效 简单并且配置灵活 体积小并且符合语义 jQuery插件使用免费

    jQuery nivo.slider图片滑动幻灯片插件带有标题图

    jQuery nivo.slider是一款广受欢迎的图片滑动幻灯片插件,它以其丰富的特性、出色的动画效果和良好的自定义能力,被广泛应用于网站设计中,为网页增添动态展示的元素。这款插件不仅支持简单的图片轮播,还能配合标题...

    幻灯片插件——Nivo Slider的使用(示例代码+Nivo Slider3.2)

    Nivo Slider是一款非常流行的JavaScript幻灯片插件,它以其美观、可定制性强以及易于集成的特点,被广泛应用于网站设计中。本篇文章将详细介绍如何使用Nivo Slider,并提供Nivo Slider 3.2版本的示例代码,帮助你...

    jQuery渐变式幻灯片nivo slider百叶窗图片切换

    nivo slider是由Nivo Devoe开发的一款免费的jQuery幻灯片插件,其特色在于提供了多种过渡效果,包括百叶窗(Blinds)在内的多种切换样式。这些切换效果不仅美观,而且可以通过简单的配置实现,无需复杂的代码编写。 ...

    nivo-slider3.2

    1. **多样化动画效果**:nivo-slider3.2内置了多种过渡效果,如滑动、淡入淡出、折叠等,可以轻松实现各种创意的视觉过渡,让网页更具吸引力。 2. **响应式设计**:随着移动设备的普及,响应式设计成为网页开发的...

    带多种过渡动画的响应式jQuery幻灯片插件

    **Nivo Slider:一款强大的响应式jQuery幻灯片插件** Nivo Slider是网页开发中广泛使用的工具,尤其适用于创建引人注目的响应式幻灯片展示。它以其丰富的功能和出色的性能,深受开发者和设计师的喜爱。这款插件的...

    jquery插件集-图片展示 幻灯片效果 图片浏览

    jQuery提供了多种实现幻灯片的插件,如Slick、Bootstrap Carousel、Nivo Slider等。它们允许自定义滑动速度、过渡效果、分页指示器和导航箭头,使得内容的展示既美观又易于控制。 2. **图片展示**:jQuery图片展示...

    jquery幻灯片插件

    本文将深入探讨一个名为"Nivo Slider"的jQuery幻灯片插件,以及如何将其应用于你的项目中。 **Nivo Slider简介** Nivo Slider是一款非常流行的jQuery幻灯片插件,以其美观、灵活和易用性而备受推崇。它支持多种...

    jquery 幻灯片 大全

    5. Nivo Slider:提供多种过渡效果,支持图像层和HTML内容,易于定制。 三、实现方法 使用jQuery 幻灯片插件通常包括以下步骤: 1. 引入库:确保引入jQuery库和所选插件的脚本文件。 2. HTML结构:按照插件文档...

    jQuery超酷百叶窗幻灯片.zip

    总的来说,jQuery.nivo.slider插件凭借其丰富的动画效果和易用性,成为了开发者实现动态焦点图和幻灯片效果的首选工具。通过巧妙地运用这个插件,开发者可以为用户提供更佳的视觉享受,进一步提升网站的吸引力和用户...

    渐变过渡的幻灯片切换效果

    Nivo Slider是一个著名的JavaScript幻灯片插件,它支持多种过渡效果,包括渐变过渡。在项目中,我们可以通过下载并引入Nivo Slider库,配置相应的选项来实现渐变过渡的幻灯片切换。Nivo Slider提供了丰富的API和回调...

    Jquery 插件大集合

    而Nivo Slider则是一个功能强大的幻灯片插件,可实现多图轮播、自动播放、动态过渡效果等。 在实际开发中,选择合适的jQuery插件要考虑项目的具体需求和性能优化。对于画廊插件,需要考虑页面加载速度、用户体验...

    15个最佳jQuery幻灯插件和教程(1)

    1. **jFlow**:jFlow是一款功能强大的jQuery幻灯插件,提供平滑的过渡效果和自定义选项。它的核心特性包括响应式设计、触控支持、无限循环以及多种导航样式。jFlow允许开发者根据项目需求定制幻灯片的布局和行为。 ...

    jquery.nivo.slider网站焦点图.zip

    Nivo Slider支持多种过渡效果,如滑动、淡入淡出等,这些效果可以为网页增添动态视觉魅力,使用户在浏览网页时保持兴趣。 要使用jQuery.nivo.slider,首先要在页面中引入jQuery库和Nivo Slider的JavaScript及CSS...

    Jquery幻灯片

    2. **插件选择**:有许多开源的jQuery幻灯片插件,如Slick、Bootstrap Carousel、Nivo Slider、FlexSlider等。这些插件预设了多种动画效果和配置选项,便于快速集成到项目中。 3. **插件配置**:每个插件都有自己的...

    jquery插件大全--打包下载

    2. **图片轮播**:如jQuery Cycle或Slick,可以创建各种类型的滑动效果,如幻灯片、轮播图等,提升网站的视觉体验。 3. **菜单导航**:如Superfish或Dropkick,提供动态下拉菜单和优雅的过渡效果,优化网站的导航...

    javascript幻灯片效果

    Nivo Slider是一款流行的JavaScript幻灯片插件,它提供了多种预设样式和自定义选项,以适应不同的设计需求。这个CSS文件包含了幻灯片的布局、动画效果、控制按钮样式等视觉元素。 2. `about.html`:可能是一个包含...

    利于SEO的jquery幻灯片

    常见的jQuery幻灯片插件有Bootstrap Carousel、Slick Slider、Nivo Slider等,它们都提供了丰富的自定义选项和良好的用户体验。 【SEO友好】在构建jQuery幻灯片时,为了提高SEO,需要注意以下几点: 1. 静态HTML:...

    jquery全屏幻灯片插件点击小图弹出大图幻灯片切换代码

    在本文中,我们将深入探讨如何使用jQuery来实现一个全屏幻灯片插件,该插件具有点击小图弹出大图并进行幻灯片切换的功能。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得创建这种...

Global site tag (gtag.js) - Google Analytics