欢迎来到我爱模板网，请记住我们的域名5imoban.net。本站资源大部分免费下载。如需定制，可联系站长QQ543031222。如果您觉得本站不错，请推荐给您的好友！

各位热心的网友们，欢迎给本站留言！您的任何建议和意见本站都会认真查看，仔细采纳！

当前位置：模板网首页 > 特效插件 > 滚动图片 > 360°立体手机展示jq正文

360°立体手机展示jquery图片轮播

作者：网页模板

大小：0.156MB

点击次数：

发布时间：2014-05-09 09:26

分享到：

特效介绍

蓝色背景可扩展图片数量的360°立体手机展示jquery图片轮播，带左右箭头，产品会围绕一个看不见的环，进行360°的依次展示，效果非常酷。兼容IE6。

使用方法

1、在head里面引入下面的css样式和js文件：

<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

2、在您的html的产品展示区域加入下面的代码：

<div id="page">
    <div id="phoneCarousel">
        <div class="previous arrow"></div>
        <div class="next arrow"></div>
        <div id="stage" style="top:60px;">
            <img id="iphone" class="default" src="img/phones/iphone.png" width="270" height="400" alt="iPhone" />
            <img id="nexus" src="img/phones/nexus_one.png" width="270" height="400" alt="Nexus One" />
            <img id="nokia" src="img/phones/nokia.png" width="270" height="400" alt="Nokia" />
            <img id="blackberry" src="img/phones/blackberry.png" width="270" height="400" alt="BlackBerry" />
        </div>
    </div>
</div>

增加图片数量的方法：将图片插入上面代码的<img>后面即可。