支持移动设备响应式jQuery幻灯片插件

PetitQ 幻灯片/轮播 2018-11-08 1.55K 0 0

iView 是一款效果非常炫酷的支持移动设备的响应式多功能 jQuery 幻灯片插件。该幻灯片插件简单易用，可以嵌入图片和视频，并且它可以制作图片标题的动画效果。可用它来制作幻灯片、banner 轮播图、banner 广告轮播图等等。该插件用 jQuery 代码将 HTML 转换为幻灯片，也可以通过定义 HTML5 data 属性来完成。这些标签都是有效的 HTML5 标签，并且对搜索引擎十分友好，利于 SEO。该幻灯片包含 35 种动画过渡效果，这些效果可以在所有的现代浏览器上工作，包括：ie6 - ie9, Firefox, Chrome, Opera, Safari，以及移动手机平台如 iOS 和 Android。为了减少页面的加载时间，该幻灯片插件基于每一个 slide 进行图片预加载，图片只会在准备显示的时候才被加载。

使用方法:

使用该幻灯片插件之前首先要引入必要的依赖文件。

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

<link rel="stylesheet" href="iview.css" type="text/css" media="screen" />

<script src="http://gapis.geekzu.org/ajax/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>

HTML 结构:

该幻灯片插件使用的是嵌套的<div>结构。

```
<div id="iview">
```
```
    
```

    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>

```
    
```

    <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div>

```
</div>
```

你也可以为每一张图片添加一个标题，你只需要在每个图片<div>中添加一个带 class 为 iview-caption 的<div>元素即可。

```
<div id="iview">
```
```
    
```

    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">

```
        
```

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

    <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg">

```
        
```

        <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>

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

如果你添加了多个图片标题到 iview-caption DIV 中，你可以决定每一个图片标题的动画效果。可用的动画效果有："wipeLeft", "wipeRight", "wipeTop", "wipeBottom", expandLeft , expandRight , expandTop , expandBottom , fade 。

<div class="iview-caption" data-transition="fade">Caption description</div>

下面是更多的可用的 HTML5 data-attributes 属性。

属性	接收值
data-transition	动画过渡效果的类型可以是："wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade"
data-easing	关于该属性的详细信息，可以参考http://jqueryui.com/easing/
data-speed	过渡动画的持续时间，单位毫秒
data-x	图片标题 X 轴的位置，单位像素
data-y	图片标题 Y 轴的位置，单位像素
data-width	图片标题的宽度，单位像素。如果不设置将使用源标题的宽度
data-height	图片标题的高度，单位像素。如果不设置将使用源标题的高度

调用插件:

在页面加载完毕之后，就可以通过下面的方法来抵用该幻灯片插件。

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

配置参数:

下面是该幻灯片插件的默认参数。

```
$(document).ready(function() {
```
```
    $('#slider').iView({
```

        fx: 'random', // Specify sets like: 'left-curtain,fade,zigzag-top,strip-left-fade'

        easing: 'easeOutQuad', // for the complete list http://jqueryui.com/demos/effect/easing.html

        strips: 20, // Number of strips for strip animations

        blockCols: 10, // Number of block columns for block animations

        blockRows: 5, // Number of block rows for block animations

        captionSpeed: 500, // Caption transition speed

        captionEasing: 'easeInOutSine', // Caption transition easing effect

        captionOpacity: 1, // Caption opacity

        animationSpeed: 500, // Slide transition speed

        pauseTime: 5000, // How long each slide will show

        startSlide: 0, // Set starting Slide (0 index)

        directionNav: true, // Next & Previous navigation

        directionNavHoverOpacity: 0.6, // Fade on hover

        controlNav: true, // 1,2,3,4... navigation

        controlNavNextPrev: true, // previous,next navigation

        controlNavHoverOpacity: 0.6, // Navigation fade on hover

        controlNavThumbs: false, // Show thumbs navigation

        controlNavTooltip: true, // Show tooltip image previewer

        autoAdvance: true, // Force auto transitions

        keyboardNav: true, // Use left & right arrows

        touchNav: true, // Use Touch swipe to change slides

        pauseOnHover: false, // Stop slider while hovering

        nextLabel: "Next", // To set the string of the next button (Multilanguage use)

        previousLabel: "Previous", // To set the string of the previous button (Multilanguage use)

        playLabel: "Play", // To set the string of the play button (Multilanguage use)

        pauseLabel: "Pause", // To set the string of the pause button (Multilanguage use)

        closeLabel: "Close", // To set the string of the close button (Multilanguage use)

        randomStart: false, // Start on a random slide

        timer: 'Pie', // Timer style: "Pie", "360Bar" or "Bar"

        timerBg: '#000', // Timer background

        timerColor: '#EEE', // Timer color

        timerOpacity: 0.5, // Timer opacity

        timerDiameter: 30, // Timer diameter

        timerPadding: 4, // Timer padding

        timerStroke: 3, // Timer stroke width

        timerBarStroke: 1, // Timer Bar stroke width

        timerBarStrokeColor: '#EEE', // Timer Bar stroke color

        timerBarStrokeStyle: 'solid', // Timer Bar stroke style

        timerX: 10, // Timer X position threshold

        timerY: 10, // Timer Y position threshold

        tooltipX: 5, // Tooltip X position threshold

        tooltipY: -5, // Tooltip Y position threshold

        onBeforeChange: function(){}, // Triggers before a slide transition

        onAfterChange: function(){}, // Triggers after a slide transition

        onSlideshowEnd: function(){}, // Triggers after all slides have been shown

        onLastSlide: function(){}, // Triggers when last slide is shown

        onAfterLoad: function(){}, // Triggers when slider has loaded

        onPause: function(){}, // Triggers when slider has paused

        onPlay: function(){} // Triggers when slider has played

```
    });
```
```
});
```

上面的第一个参数 fx 是设置幻灯片的效果，可取值有：

random	strip-down-right	strip-down-left	strip-up-right	strip-up-left
strip-up-down	strip-up-down-left	strip-left-right	strip-left-right-down	slide-in-right
slide-in-left	slide-in-up	slide-in-down	left-curtain	right-curtain
top-curtain	bottom-curtain	fade	block-random	block-fade
block-fade-reverse	block-expand	block-expand-reverse	block-expand-random	block-drop-random
zigzag-top	zigzag-bottom	zigzag-grow-top	zigzag-grow-bottom	zigzag-drop-top
zigzag-drop-bottom	strip-left-fade	strip-right-fade	strip-top-fade	strip-bottom-fade

HTML5 data 属性:

该幻灯片插件的图片 URL 使用的是 HTML5 data-属性，这将允许我们只在准备显示图片的时候才加载图片（懒加载）。通过 HTML5 data- 属性你还可以添加其它的属性到幻灯片上。例如添加缩略图的 URL：

<div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>

或者为幻灯片添加过渡动画效果：

<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top"></div>

你也可以设置一个随机的动画过渡效果：

<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top,top-curtain,fade"></div>

下面是该幻灯片插件所用可用的 data-属性：

属性	接收值
data-iview:transition	动画过渡效果可以接收的值有： "strip-down-right", "strip-down-left", "strip-up-right", "strip-up-left", "strip-up-down", "strip-up-down-left", "strip-left-right", "strip-left-right-down", "slide-in-right", "slide-in-left", "slide-in-up", "slide-in-down", "left-curtain", "right-curtain", "top-curtain", "bottom-curtain", "fade", "block-random", "block-fade", "block-fade-reverse", "block-expand", "block-expand-reverse", "block-expand-random", "block-drop-random", "zigzag-top", "zigzag-bottom", "zigzag-grow-top", "zigzag-grow-bottom", "zigzag-drop-top", "zigzag-drop-bottom", "strip-left-fade", "strip-right-fade", "strip-top-fade", "strip-bottom-fade"
data-iview:easing	可以参考 http://jqueryui.com/easing/
data-iview:image	幻灯片图片保存的地址 URL
data-iview:thumbnail	幻灯片图片缩略图保存的地址 URL（如果`controlNavThumbs`设置为`true`）
data-iview:pausetime	一个 slide 结束到另一个 slide 开始的时间，单位毫秒
data-iview:type	幻灯片的类型，设置为 video 就该 slide 就用于视频播放

方法:

幻灯片的暂停和播放：

$('#slider').trigger('iView:pause'); //Stop the Slider

$('#slider').trigger('iView:play'); //Start the Slider

手动改变幻灯片：

$('#slider').trigger('iView:goSlide', [2]); //Go to slide 2

前一个和下一个幻灯片：

$('#slider').trigger('iView:previous'); //Go to previous slide

$('#slider').trigger('iView:next'); //Go to next slide

设置幻灯片随机开始播放：

var total = $('#slider').children().length;

var rand = Math.floor(Math.random()*total);

```
$('#slider').iView({
```
```
    startSlide:rand
```
```
});
```

支持移动设备响应式 jQuery 幻灯片插件

已有 387 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

幻灯片/轮播

支持移动设备响应式jQuery幻灯片插件

使用方法:

HTML 结构:

调用插件:

配置参数:

HTML5 data 属性:

方法:

支持移动设备响应式 jQuery 幻灯片插件

相关文章

HTML5全屏图像百叶窗切换特效代码

jQuery和CSS3堆叠式轮播图特效

全屏圆形导航轮播图布局jQuery特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法:

HTML 结构:

调用插件:

配置参数:

HTML5 data 属性:

方法:

支持移动设备响应式 jQuery 幻灯片插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复