网站顶部3D立体广告图片展示特效代码

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div id="page">

 <h1 id="logoh1"> </h1>

 <div id="phoneCarousel">

  <div class="previous arrow"></div>

  <div class="next arrow"></div>

  <div id="stage"> 

  <img id="iphone" class="default" src="images/phones/iphone.png

    <img id="nexus" src="images/phones/nexus_one.png

    <img id="nokia" src="images/phones/nokia.png

    <img id="blackberry" src="images/phones/blackberry.png

  </div>

 </div>

</div>

4、书写css代码。

* { margin: 0; padding: 0; }

body { font-size: 14px; color: #515151; background: url('../images/bg.png') repeat-x #f6f8f9; font-family: 'Myriad Pro', Arial, Helvetica, sans-serif; }

#logoh1 { margin: 40px 0 0; }

#page { width: 1000px; min-height: 700px; margin: 0 auto; background: url('../images/bokeh.jpg') no-repeat 0 120px; position: relative; padding-top: 1px; }

#phoneCarousel { height: 390px; margin: 90px auto 120px; position: relative; width: 800px; }

#phoneCarousel .arrow { width: 44px; height: 44px; background: url('../images/arrows.png') no-repeat; position: absolute; top: 50%; margin-top: -22px; left: 0; cursor: pointer; }

#phoneCarousel .next { background-position: right top; left: auto; right: 0; }

#phoneCarousel .arrow:hover { background-position: left bottom; }

#phoneCarousel .next:hover { background-position: right bottom; }

#logo { background: url('../images/logo.png') no-repeat; height: 40px; text-indent: -9999px; width: 210px; display: block; }

#stage { left: 50%; margin-left: -350px; position: absolute; width: 700px; height: 100%; }

#stage img { display: none; }

#stage .default { display: block; left: 50%; margin-left: -135px; position: absolute; }

#stage .animationReady { display: block; position: absolute; top: 0; left: 0; }

.text { margin-top: 70px; width: 700px; }

.text p, .text h3 { padding-bottom: 15px; line-height: 1.4; text-align: justify; }

.text h3 { font-size: 30px; }

.text p { font-size: 20px; }

.thumb { float: left; margin-right: 40px; }

.availableAppStore { float: right; }

h2 { font-size: 22px; font-style: italic; font-weight: normal; position: absolute; right: 0; top: 52px; }

h2 a { color: #666666; }

#thanks { color: #aaa; font-size: 12px; text-align: center; padding: 50px; }

#thanks a { color: #888; }

a, a:visited { text-decoration: none; outline: none; }

a:hover { text-decoration: underline; }

a img { border: none; }

5、书写并添加js代码。

<script src="1.4.2/jquery.min.js"></script> 

<script src="js/script.js"></script>

js包，可以网上下载。

6、代码整体结构。

7、查看效果。