jQuery+CSS3炫酷图片3D旋转幻灯片特效

PetitQ 幻灯片/轮播 2018-10-31 1.72K 0 0

iPresenter 是一款效果非常炫酷的 jQuery 和 CSS3 3D 旋转幻灯片特效插件。你可以使用它来制作产品展示、图片画廊或者各种幻灯片和轮播图特效。这款幻灯片插件的特点有：

兼容 jQuery

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

高度灵活和可定制性

灵活的用户界面的设计

在单个 HTML 页面中允许存在多个实例

可以定制每一个 slider 的 easing 效果

多语言支持

可以在 iOS 和 Android 上正常工作

可以选择自动播放模式下鼠标悬停时停止播放幻灯片

非常容易调整尺寸

兼容外部字体（如谷歌字体）

有预加载进度条显示

支持键盘控制

支持移动触摸屏

可以通过 CSS 来自定义样式

使用配置简单易用

不限制 transition 效果

可定制 transition 配置和 transition timing 函数（easing）

可以使用 Cubic-bezier 函数

可定制每一个幻灯片的时间

带 tooltip 缩略图显示

可以通过缩略图或圆点导航按钮来导航

可以在所有支持 CSS3 的现代浏览器中工作

HTML 结构:

该幻灯片的 HTML 结构可以使用一个简单的 HTML5 结构：

```
<!DOCTYPE html>
```
```
<html>
```
```
    <head>
```
```
        <title>iPresenter</title>
```
```
 
```
```
 
```

        <!-- Google Webfonts and our stylesheet -->

        <link rel="stylesheet" href="http://fonts.useso.com/css?family=PT+Sans+Narrow" />

        <link rel="stylesheet" href="css/styles.css" />

        <link rel="stylesheet" href="css/demo1.css" />

```
 
```
```
        
```

        <script src="js/jquery-1.7.1.min.js"></script>

        <script src="js/ipresenter.encoded.js"></script>

```
 
```

        <!-- iPresenter script starter Section -->

```
        <script>
```

            $(document).ready(function(){

                $('#ipresenter').iPresenter();

```
            });
```
```
        </script>
```
```
    </head>
```
```
    <body>
```
```
 
```
```
        
```
```
        <div class="container">
```
```
 
```

            <!-- BEGIN #ipresenter element container -->

```
            <div id="ipresenter">
```
```
 
```

                <!-- The Slides Will Go Here -->

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

            <!-- END #ipresenter element container -->

```
 
```
```
        </div>
```
```
        
```
```
 
```
```
    </body>
```
```
</html>
```

div#ipresenter 用于包裹整个幻灯片。

```
<div id="ipresenter">
```
```
 
```
```
    
```
```
 
```
```
</div>
```

通过这个幻灯片插件，我们可以创建各种幻灯片切换时的平滑过渡效果。插件通过为每一个 div 设置不同的 data 属性，这些 data 属性会转换为真正的 CSS3 动画效果。下面是所有可用的 data 属性：

data-easing：easing timing 函数（也可接收 cubic-bezier 函数）。

```
 
```
```
        linear
```
```
        ease
```
```
        ease-in
```
```
        ease-out
```
```
        ease-in-out
```
```
        ease-out-in
```
```
        easeInQuad
```
```
        easeOutQuad
```
```
        easeInOutQuad
```
```
        easeInCubic
```
```
        easeOutCubic
```
```
        easeInOutCubic
```
```
        easeInQuart
```
```
        easeOutQuart
```
```
        easeInOutQuart
```
```
        easeInQuint
```
```
        easeOutQuint
```
```
        easeInOutQuint
```
```
        easeInSine
```
```
        easeOutSine
```
```
        easeInOutSine
```
```
        easeInExpo
```
```
        easeOutExpo
```
```
        easeInOutExpo
```
```
        easeInCirc
```
```
        easeOutCirc
```
```
        easeInOutCirc
```
```
        easeInBack
```
```
        easeOutBack
```
```
        easeInOutBack
```

data-pausetime：slide 多久才会显示

data-x, data-y, data-z：将幻灯片在屏幕 3D 空间中移动

data-rotate, data-rotate-x, data-rotate-y, data-rotate-z：沿指定的轴旋转元素，单位 degrees

data-scale：放大或缩小幻灯片

data-thumbnail：缩略图的 url

代码如下：

<!-- The first slide retains its default position. We could omit the data attributes -->

<div id="intro" class="step" data-x="0" data-y="0">

```
    <img src="img/details.png" />
```

    <h2>A phone that sees the world like you do, in 3D</h2>

    <p>Now your photos can have as much depth as the moment itself. HTC EVO 3D captures your photos and videos in 3D, plus you can view them without the glasses. The stunning 4.3-inch qHD display gives you crisp websites, vivid images and incredibly fluid videos.</p>

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

<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->

<div id="capture" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="180" data-easing="easeInOutQuint">

```
    <img src="img/ksp1.png" />
```
```
    <h2>Capture life in 3D</h2>
```

    <p>HTC EVO 3D allows you to shoot 3D movies and snap 3D photos via dual cameras, so no matter where you are, capture life as it should be. And see it all in true-to-life detail without 3D glasses.</p>

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

```

<div id="view" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">

```
    <img src="img/ksp2.png" />
```
```
    <h2>An incredible view</h2>
```

    <p>The large 4.3 inch display serves up incredibly crisp websites, vivid images and fluid video on a pixel-packed qHD screen. Catch the latest blockbusters straight from HTC Watch � a new service that starts the show just seconds into the download and monitors your Internet connection to ensure uninterrupted viewing.</p>

```
</div>
```

CSS 样式:

该幻灯片插件中有两个主要的 CSS 样式文件，一个是 styles.css，这个样式表用于生成页面的通用样式，如字体、链接等样式。第二个对应每个 demo 的样式表，分为 demo1.css 和 demo2.css，分别用于为两个 demo 指定样式：

```
/* === Preloader Section === */
```
```
 
```
```
    div#ipresenter div#preloader {
```
```
        some styles
```
```
    }
```
```
 
```
```
    div#ipresenter div#preloader div {
```
```
        some styles
```
```
    }
```
```
 
```
```
/* === Steps Section === */
```
```
 
```
```
    div#ipresenter div.step {
```
```
        some styles
```
```
    }
```
```
 
```

/* === Control Navigation Section === */

```
 
```
```
    /* = General = */
```
```
    a.ipresenter_stepsNav {
```
```
        some styles
```
```
    }
```
```
 
```
```
    /* = Next Button = */
```
```
    a#ipresenter_nextStep {
```
```
        some styles
```
```
    }
```
```
 
```
```
    /* = Previous Button = */
```
```
    a#ipresenter_prevStep {
```
```
        some styles
```
```
    }
```
```
 
```

    /* = Pagination Buttons Container = */

```
    div.ipresenter-controlNav {
```
```
        some styles
```
```
    }
```
```
 
```

    /* = Pagination Previous Buttons = */

    div.ipresenter-controlNav a.ipresenter-controlPrevNav {

```
        some styles
```
```
    }
```
```
 
```
```
    /* = Pagination Next Button = */
```

    div.ipresenter-controlNav a.ipresenter-controlNextNav {

```
        some styles
```
```
    }
```
```
 
```
```
    /* = Pagination Number Button = */
```

    div.ipresenter-controlNav a.ipresenter-control {

```
        some styles
```
```
    }
```
```
 
```
```
    /* = Pagination Tooltip = */
```

    div.ipresenter-controlNav div.ipresenter-tooltip {

```
        some styles
```
```
    }
```
```
 
```

    div.ipresenter-controlNav div.ipresenter-tooltip div {

```
        some styles
```
```
    }
```
```
 
```

    div.ipresenter-controlNav div.ipresenter-tooltip img {

```
        some styles
```
```
    }
```
```
 
```
```
/* === Playback === */
```
```
 
```
```
    /* = General = */
```
```
    #ipresenter-timer {
```
```
        some styles
```
```
    }
```
```
 
```
```
    /* = When its playing = */
```
```
    #ipresenter-timer.play {
```
```
        some styles
```
```
    }
```
```
 
```
```
    /* = When its paused = */
```
```
    #ipresenter-timer.pause {
```
```
        some styles
```
```
    }
```

所有的图片样式都放置在 div.step 中，你可以自定义它们。如果你要修改它们，只需要找到下面的代码：

```
div#ipresenter div.step img {
```
```
    change styles here
```
```
}
```

JAVASCRIPT:

在页面加载之后，可以使用下面的方法调用该幻灯片插件：

```
$(document).ready(function(){
```
```
    $('#ipresenter').iPresenter();
```
```
});
```

下面列出了该幻灯片插件所有可用的参数：

```
$(document).ready(function(){
```
```
    $('#ipresenter').iPresenter({
```
```
        easing: 'ease-in-out',
```
```
        autoPlay: true,
```
```
        replay: true,
```
```
        animSpeed: 1000,
```
```
        pauseTime: 5000,
```
```
        directionNav: true,
```
```
        directionNavHoverOpacity: 0.6,
```
```
        controlNav: true,
```
```
        controlNavNextPrev: true,
```
```
        controlNavHoverOpacity: 0.6,
```
```
        controlNavThumbs: false,
```
```
        controlNavTooltip: true,
```
```
        keyboardNav: true,
```
```
        pauseOnHover: false,
```
```
        itemsOpacity: 0.4,
```
```
        randomStart: false,
```
```
        startStep: 0,
```
```
        timer: 'Pie',
```
```
        timerBg: '#000',
```
```
        timerColor: '#EEE',
```
```
        timerOpacity: 0.5,
```
```
        timerDiameter: 30,
```
```
        timerPadding: 4,
```
```
        timerStroke: 3,
```
```
        timerBarStroke: 1,
```
```
        timerBarStrokeColor: '#EEE',
```
```
        timerBarStrokeStyle: 'solid',
```
```
        timerPosition: 'top-right',
```
```
        nextLabel: "Next",
```
```
        previousLabel: "Previous",
```
```
        playLabel: "Play",
```
```
        pauseLabel: "Pause",
```
```
        onBeforeChange: function(){},
```
```
        onAfterChange: function(){},
```
```
        onLastStep: function(){},
```
```
        onAfterLoad: function(){},
```
```
        onPause: function(){},
```
```
        onPlay: function(){}
```
```
    });
```
```
});
```

jQuery+CSS3 炫酷图片 3D 旋转幻灯片特效

已有 431 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

幻灯片/轮播

jQuery+CSS3炫酷图片3D旋转幻灯片特效

HTML 结构:

代码如下：

CSS 样式:

JAVASCRIPT:

jQuery+CSS3 炫酷图片 3D 旋转幻灯片特效

相关文章

xSlider - 图片轮播幻灯片jQuery插件

基于CSS Grid炫酷js轮播图特效

基于CSS3混合模式轮播图jQuery特效

发表回复取消回复

热销模板

幻灯片/轮播

HTML 结构:

代码如下：

CSS 样式:

JAVASCRIPT:

jQuery+CSS3 炫酷图片 3D 旋转幻灯片特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复