jQuery+iPresenter3D旋转图片超炫效果

收藏

IPresenter是一款简单而强大的轮播图片插件，可以很简单的设计3D效果，并且支持移动端。本文以两个DEMO来讲述IPresenter。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们在#ipresenter放置多个div

<div id="ipresenter"> 
    <div id="intro" class="step" data-x="0" data-y="0" data-thumbnail="img/thumbnails/1.jpg"> 
     <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>
    ......
</div>

jQuery

调用轮播插件ipresenter Api非常丰富：

$('#ipresenter').iPresenter({
    timerPadding: -1,
    //计时器内边距 
    controlNav: true,
    //是否显示控制按钮
    controlNavThumbs: true,
    //是否显示缩略图控制
    controlNavNextPrev: false //是否显示“上一张”“下一张”导航 
});

DEMO2 API说明：

$('#ipresenter').iPresenter({
    animSpeed: 2000,
    //切换时间 毫秒
    timer: '360Bar',
    //计时器样式 “Pie”, “360Bar” 或 “Bar”
    timerDiameter: 60,
    //计时器直径
    timerStroke: 5,
    // 	计时器边框宽度 
    timerPadding: 5,
    //计时器内边距 
    timerColor: '#000',
    // 	计时器文字颜色 
    timerBg: '#FFF',
    //计时器背景色
    timerOpacity: 0.4,
    //计时器的不透明度 
    directionNav: false,
    // 	是否显示“上一张”“下一张”导航 
    controlNav: true //是否显示控制按钮
});

iPresenter API