jQuery iView滑动插件下载

继强大的MyFocus之后，今天我爱模板网在这里再给各位草根站长推荐一款超强大的图片轮播插件：jQuery iView。它内置35中炫酷的过渡效果，支持响应式布局，兼容各种主流浏览器。不仅能用于图片，包括文字、视频等等也可以用来制作滚动效果。可以设置各式各样的缩略图，如：普通的置于底部的，或者鼠标移上去悬浮在滑动按钮上的等，自带水平加载条或者圆形加载条，总之功能很强大，一言难尽。可以在本文底部查看按钮直接查看demo。这里为大家准备了五个页面共七种效果。
1、引入iView需要的js、css文件(如果您觉得文件过多，可以合并css和js文件)：

<link rel="stylesheet" href="style/styles.css" />
<link rel="stylesheet" href="style/iview.css" />
<link rel="stylesheet" href="style/skin_1/style.css" />
<script src="https://5.jimth.com/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>

2、在head引入下面的代码:

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

3、在您需要使用本插件的地方加入下面的代码：

<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</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>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(){}