jQuery+iPresenter3D旋转图片超炫效果

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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