jQuery.nivo.slider.js 幻灯片图片切换
来源:互联网 发布:阿里云logo矢量图 编辑:程序博客网 时间:2024/06/05 02:09
号称最好的JQUERY幻灯片,虽然夸夸其谈,但也算简单易用
使用步骤
1、引入以下的js和css文件
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script><script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
2、在head标签中加入以下js代码
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); });</script>
3、在body标签中加入以下格式的html代码
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="images/slide1.jpg" alt=""> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption"></a> <imgsrc="images/slide3.jpg" alt="" title="This is an example of a caption"> <imgsrc="images/slide4.jpg" alt=""> </div></div><div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <ahref="#">a link</a>.</div>
参数配置
参数名 参数说明 可选值 默认值
参数名 参数说明 参数取值 默认值
effect 切换样式 字符串 ‘random’
slices 针对slice样式的切换级数,数字越大切换越慢过渡越小 数字 15
boxCols 针对box样式的切换列数,数字越大切换越慢过渡越小 数字 8
boxRows 针对box样式的切换行数,数字越大切换越慢过渡越小 数字 4
animSpeed 切换动画的速度 数字 500
pauseTime 相邻两张幻灯片切换的间隔时间 数字 3000
startSlide 从第几张图片开始切换 数字 0
directionNav 是否显示‘上一张/下一张’导航 布尔值 true
controlNav 是否显示数字导航 布尔值 true
controlNavThumbs 是否用缩略图导航 布尔值 false, // Use thumbnails for Control Nav
pauseOnHover 当鼠标移到幻灯片上的时候是否暂停切换 布尔值 true
manualAdvance 是否强制手动切换 布尔值 false
prevText ’上一张‘的文字 字符串 ‘Prev’
nextText ’下一张‘的文字 字符串 ‘Next’
randomStart 是否从一张随机的图片开始切换 布尔值 false
beforeChange 在幻灯片切换之前的回调函数 函数 function(){}
afterChange 在幻灯片切换之后的回调函数 函数 function(){}
slideshowEnd 在所有幻灯片都切换完毕后的回调函数 函数 function(){}
lastSlide 在最后一张幻灯片显示的回调函数 函数 function(){}
afterLoad 在幻灯片加载完成后的回调函数 函数 function(){}
切换效果
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
查看原文
查看在线演示Demo和更多原文内容:http://www.ibloger.net/article/1170.html
- jQuery.nivo.slider.js 幻灯片图片切换
- 号称最好的JQUERY幻灯片-NIVO SLIDER
- 号称最好的JQUERY幻灯片-NIVO SLIDER
- Drupal7 幻灯片 Nivo Slider
- Nivo Slider 简要使用文档(jQuery幻灯片插件)
- jquery.nivo.slider.pack.js 插件
- jQuery幻灯插件:Nivo Slider
- KinSlideshow幻灯片插件 Jquery幻灯片 图片切换
- jquery 幻灯片 图片切换效果
- js图片切换 幻灯片效果
- Nivo Slider for jquery and wordpress plugin
- jquery插件nivo-slider实现幻灯效果
- jquery.nivo.slider轮播插件使用
- jquery图片幻灯片插件特效jquery.slider例子
- 一个图片轮播插件---Nivo Slider
- Js图片特效:图片幻灯片切换
- jquery 实现图片切换幻灯片效果
- 纯js图片切换幻灯片代码
- hdu5733内切球
- Android中ViewFlipper的使用详解
- react listview最上方空白
- 安装phpredis扩展
- OC数据持久化
- jQuery.nivo.slider.js 幻灯片图片切换
- 设计模式之观察者模式
- 安卓学习笔记---RecyclerView的五大开源项目-解决办法
- RecyclerView添加Header的正确方式
- Can you find it?(二分)
- 【Light】[1137]Expanding Rods
- IO流4(补充
- tools:replace="android:icon" 的作用和替代方法
- 初入VS和CSDN