绚丽的幻灯片插件-IVIEW

所属分类：媒体-幻灯片和轮播图

39207 377 查看评论 (5)

分享到微信朋友圈

查看演示立即下载

插件描述：绚丽的幻灯片插件-IVIEW

使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" href="iview.css" type="text/css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"type="text/javascript"></script>
<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代码

<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').iView();
    });
</script>

3、在body标签中加入以下格式的html代码

<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(){}