你的位置:首页 > 软件开发 > Java > 带多种过渡动画的响应式jQuery幻灯片插件

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

发布时间:2015-10-19 10:00:12
Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件。该幻灯片插件内置有16种不同的动画过渡效果。它提供了丰富的参数来控制幻灯片的播放。它使用简单,并且可以兼容IE8浏览器。在线预览 源码下载 使用方法使用Nivo-Slider幻灯片需要引 ...

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

Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件。该幻灯片插件内置有16种不同的动画过渡效果。它提供了丰富的参数来控制幻灯片的播放。它使用简单,并且可以兼容IE8浏览器

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

在线预览    源码下载

 使用方法

使用Nivo-Slider幻灯片需要引入nivo-slider.css,jQuery(1.7+)和jquery.nivo.slider.js文件。

1
 HTML结构

该响应式幻灯片的HTML结构非常简单,使用一个带#slider<div>作为容器,里面放置你需要的图片即可。

1

最好在包裹容器上添加class nivoSlider。上面的代码中还展示了如何为图标添加可以带HTML标签的标题效果(例如超链接)。它们的关联关系是在图片的title属性指向作为图片标签的容器div#htmlcaption

 调用插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该幻灯片插件。

1

注意Nivo Slider幻灯片插件使用$(window).load()函数而不是$(document).ready()函数,这与其它jQuery插件的使用有所不同。

 配置参数

下面是该响应式幻灯片的可用配置参数。

参数默认值描述
effect'random'幻灯片的过渡动画效果,可以指定类似:'fold,fade,sliceDown'
slices15slice动画过渡的配置
boxCols8box动画过渡的配置
boxRows4box动画过渡的配置
animSpeed500幻灯片过渡动画的时间
pauseTime3000每一个幻灯片slide显示的时间
startSlide0幻灯片开始的slide的序号
directionNavtrue是否显示next/prev导航
controlNavtrue是否显示圆点导航
controlNavThumbsfalse使用图片缩略图来代替圆点导航按钮
pauseOnHovertrue在鼠标滑过幻灯片时是否暂停播放
manualAdvancefalse强制手动进行过渡动画
prevText'Prev'prev导航按钮上的文本
nextText'Next'next导航按钮上的文本
randomStartfalse是否随机开始播放
beforeChangefunction(){}一个slide开始过渡动画之前触发
afterChangefunction(){}一个slide结束过渡动画之后触发
slideshowEndfunction(){}所有的幻灯片都被显示之后触发
lastSlidefunction(){}最后一个幻灯片slide显示之后触发
afterLoadfunction(){}幻灯片被加载之后触发

effect可以设置为以下的动画过渡效果:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

 小技巧

 使用幻灯片主题

要使用Nivo Slider幻灯片插件提供的各种主题样式,可以按下面操作。首先在页面中引入主题CSS文件。

1

然后需要按下面的格式调整一些你的HTML标签。

1

注意,你可以在页面中引入多个主题CSS样式文件,但是它们不会被显示,直到你在幻灯片包裹容器上设置theme-{theme name}后,该主题才会被启用。

 使用缩略图导航

要使用缩略图导航必须确保controlNavThumbs参数设置为true。该参数被启用后,插件会检查图片的data-thumb属性,使用该属性中指定的图片URL作为缩略图。

1
 自定义每一个slide的动画过渡效果

你可以使用data-transition属性为幻灯片的每一个slide指定它的过渡动画效果,例如:

1

上面的代码会强制该slide在每次出现的时候都使用slideInLeft过渡动画。

via:http://www.w2bc.com/article/the-most-awesome-jquery-image-slider


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

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录