使用步骤
1、引入以下的js和css文件
1 2 3 4 5 | <link rel="stylesheet" href="iview.css" type="text/css" media="screen"><script src="raphael-min.js" type="text/javascript"></script><script src="jquery.easing.js" type="text/javascript"></script><script src="iview.packed.js" type="text/javascript"></script> |
2、在head标签中加入以下js代码
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function() { $('#slider').iView(); });</script> |
3、在body标签中加入以下格式的html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <div id="iview"> <!-- Slide 1 --> <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"> <!-- Caption --> <div class="iview-caption" data-x="0" data-y="0" data-width="400"data-height="300" data-transition="wipeRight" data-speed="700"> <h3> The Responsive Caption </h3>This is the product that you <b><i>all have been waiting for</i></b>! Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message. All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices! </div> </div><!-- Slide 2 --> <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"> <!-- Caption --> <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft"> Caption Description </div> </div> </div> |
参数配置
参数名 参数说明 可选值 默认值
fx 幻灯片切换效果 所有效果见下面
easing 缓动效果 所有效果见 http://jqueryui.com/demos/effect/easing.html
strips Number of strips for strip animations 整数
blockCols Number of block columns for block animations 整数
blockRows Number of block rows for block animations 整数
captionSpeed 标题切换速度 整数
captionEasing 标题切换效果 字符串
captionOpacity 标题透明度 0-1的小数
animationSpeed 幻灯片切换速度 整数
pauseTime 每张幻灯片显示时间 整数
startSlide 从第几张开始播放 整数
directionNav 是否显示“上一张”“下一张”导航 true或false
directionNavHoverOpacity 鼠标移动到导航条上时的不透明度 0-1的小数
controlNav 是否显示数字导航 true或false
controlNavNextPrev 是否显示“上一张”“下一张”导航 true或false
controlNavHoverOpacity 鼠标移动到导航条上时的不透明度 0-1的小数
controlNavThumbs 是否显示拇指导航 true或false
controlNavTooltip 是否显示预览图提示 true或false
autoAdvance 是否自动切换 true或false
keyboardNav 是否允许键盘按键导航 true或false
touchNav 是否允许触摸滑动来切换 true或false
pauseOnHover 是否当鼠标移动到幻灯片上时暂停切换 true或false
nextLabel “下一张”按钮上的文字 字符串
previousLabel “上一张”按钮上的文字 字符串
playLabel “播放”按钮上的文字 字符串
pauseLabel “暂停”按钮上的文字 字符串
closeLabel “关闭”按钮上的文字 字符串
randomStart 是否从随机的幻灯片开始播放 true或false
timer 计时器样式 “Pie”, “360Bar” 或 “Bar”
timerBg 计时器背景 字符串
timerColor 计时器文字颜色 字符串
timerOpacity 计时器的不透明度 0-1的小数
timerDiameter 计时器直径 整数
timerPadding 计时器内边距 数字
timerStroke 计时器边框宽度 数字
timerBarStroke 计时器条的边框宽度 数字
timerBarStrokeColor 计时器条的边框颜色 字符串
timerBarStrokeStyle 计时器条的边框样式 ‘solid’或’dotted’
timerX 计时器X位置阈值 数字
timerY 计时器Y位置阈值 数字
tooltipX 提示工具X位置阈值 数字
tooltipY 提示工具Y位置阈值 数字
onBeforeChange 在一张图片切换之前调用的函数 function(){}
onAfterChange 在一张图片切换之后调用的函数 function(){}
onSlideshowEnd 当所有图片显示后调用的函数 function(){}
onLastSlide 当最后一张图片显示后调用的函数 function(){}
onAfterLoad 当幻灯片加载后调用的函数 function(){}
onPause 当幻灯片暂停时调用的函数 function(){}
onPlay 当幻灯片播放时调用的函数 function(){}
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 强力推荐一款强大布局插件-FERROSLIDER
- 下一个特效： 图片放大镜插件-MLENS