一款很实用的jQuery iPresenter 3D图片旋转

在线实例

效果一

效果二

使用方法

<div class="htmleaf-container">
    <div class="htmleaf-content">
        <div class="container">
            <div id="ipresenter">
                <div id="intro" class="step" data-x="0" data-y="0" data-thumbnail="/api/jq/5733e33267b64/img/thumbnails/1.jpg">
                    <img src="/api/jq/5733e33267b64/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 id="capture" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="180"  data-thumbnail="/api/jq/5733e33267b64/img/thumbnails/2.jpg">
                    <img src="/api/jq/5733e33267b64/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" data-thumbnail="/api/jq/5733e33267b64/img/thumbnails/3.jpg">
                    <img src="/api/jq/5733e33267b64/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>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js"></script> 
<script src="/api/jq/5733e33267b64/js/ipresenter.packed.js"></script>
<script>
    $(function() {
        $('#ipresenter').iPresenter({
            timerPadding: -1,//计时器内边距 
            controlNav: true,//是否显示控制按钮
            controlNavThumbs: true,//是否显示缩略图控制
            controlNavNextPrev: false //是否显示“上一张”“下一张”导航 
        });
    });
</script>