jQuery+iPresenter3D旋转图片超炫效果

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

淘建站为您提供更多_图片代码_图片轮播_选择_ipresenter，在此特别感谢您对我们的支持与厚爱！

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