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

PetitQ 幻灯片/轮播 2018-11-02 1.64K 0 0

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

使用方法:

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

也想出现在这里？联系我们吧

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

<script src=js/jquery.min.js" type="text/javascript"></script>

<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>

HTML 结构:

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

```
<div id="slider" class="nivoSlider">
```

    <img src="images/slide1.jpg" alt="" />

    <a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>

    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />

    <img src="images/slide4.jpg" alt="" />

```
</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>
```

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

调用插件:

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

```
<script type="text/javascript">
```
```
  $(window).load(function() {
```
```
      $('#slider').nivoSlider();
```
```
  });
```
```
</script>
```

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

配置参数:

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

参数名	参数说明	参数类型	默认值
effect	切换样式	字符串	‘random’
?slices	针对 slice 样式的切换级数，数字越大切换越慢过渡越小	数字	15
boxCols	针对 box 样式的切换列数，数字越大切换越慢过渡越小	数字	8
boxRows	针对 box 样式的切换行数，数字越大切换越慢过渡越小	数字	4
animSpeed	切换动画的速度	数字	500
pauseTime	相邻两张幻灯片切换的间隔时间	数字	3000
?startSlide	从第几张图片开始切换	数字	0
directionNav	是否显示‘上一张/下一张’导航	布尔值	true
????controlNav	是否显示数字导航	布尔值	true
controlNavThumbs	是否用缩略图导航	布尔值	false
pauseOnHover	当鼠标移到幻灯片上的时候是否暂停切换	布尔值	true
manualAdvance	是否强制手动切换	布尔值	false
???prevText	’上一张‘的文字	字符串	‘Prev’
nextText	’下一张‘的文字	字符串	‘Next’
randomStart	是否从一张随机的图片开始切换	布尔值	false
beforeChange	在幻灯片切换之前的回调函数	函数	function(){}
afterChange	在幻灯片切换之后的回调函数	函数	function(){}
slideshowEnd	在所有幻灯片都切换完毕后的回调函数	函数	function(){}
lastSlide	在最后一张幻灯片显示的回调函数	函数	function(){}
afterLoad??	在幻灯片加载完成后的回调函数	函数	function(){}

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

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

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

<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" />

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

<div class="slider-wrapper theme-default">

```
    <div class="ribbon"></div>
```

    <div id="slider" class="nivoSlider">

```
        ...
```
```
    </div>
```
```
</div>
```

注意，你可以在页面中引入多个主题 CSS 样式文件，但是它们不会被显示，直到你在幻灯片包裹容器上设置 theme-{theme name}后，该主题才会被启用。使用缩略图导航，要使用缩略图导航必须确保 controlNavThumbs 参数设置为 true。该参数被启用后，插件会检查图片的 data-thumb 属性，使用该属性中指定的图片 URL 作为缩略图。

```
<div id="slider">
```

    <img src="images/1.jpg" alt="" data-thumb="images/1_thumb.jpg" />

    <img src="images/2.jpg" alt="" data-thumb="images/2_thumb.jpg" />

    <img src="images/3.jpg" alt="" data-thumb="images/3_thumb.jpg" />

    <img src="images/4.jpg" alt="" data-thumb="images/4_thumb.jpg" />

```
</div>
```

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

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />

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

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

已有 410 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

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

使用方法:

HTML 结构:

调用插件:

配置参数:

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

相关文章

PicCarousel - 简单jQuery旋转木马插件

3D图像旋转轮播图jQuery效果

仿智能电视APP应用滑动幻灯片jQuery插件

发表回复取消回复

热销模板

幻灯片/轮播

使用方法:

HTML 结构:

调用插件:

配置参数:

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复