基于jQuery实现立体式图片轮换效果



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

150 598 200



特效描述:基于jQuery实现 立体式 图片轮换效果。基于jQuery实现立体式图片轮换效果

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/zzsc.css" />

2. 引入JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>

3. HTML代码

<br><br><br><br>
<div id="chinaz">
  <div class="container">
    <h2 class="hidden"></h2>
    <ul class="list">
      <li class="active"><a href="#repubblica_case_design" class="button">案例展示(一)</a></li>
      <li><a href="#casetrentine" class="button">案例展示(二)</a></li>
      <li><a href="#bobadilium" class="button">案例展示(三)</a></li>
      <li><a href="#fiart" class="button">案例展示(四)</a></li>
    </ul>
    <a href="http://51qianduan.com" class="link_portfolio button portfolio">51前端</a>
    <div id="chinaz_container">
      <div class="work active">
        <h3 class="hidden">Repubblica.it - Casa&amp;Design</h3>
        <ul class="images">
          <li class="left"><a href="http://51qianduan.com/"><img src="images/repubblica-design-home_01.jpg" alt="immagine del portfolio"/></a></li>
          <li class="center"><a href="http://51qianduan.com/"><img src="images/repubblica-design-home_02.jpg"  alt="immagine del portfolio"/></a></li>
          <li class="right"><a href="http://51qianduan.com//"><img src="images/repubblica-design-home_03.jpg"  alt="immagine del portfolio"/></a></li>
        </ul>
        <div class="description">
          <p>有时候,莫名的心情不好,不想和任何人说话,也不想搭理任何人,只想一个人静静的发呆。</p>
          <p><a href="http://51qianduan.com " class="simple_link">&raquo; 查看详情</a></p>
        </div>
        <!--                <div class="quote"><blockquote></blockquote></div>-->
      </div>
      <div class="work">
        <h3 class="hidden">Case Trentine - Welcome home</h3>
        <ul class="images">
          <li class="left"><a href="http://51qianduan.com/"><img src="images/casetrentine-home_01.jpg" alt="immagine del portfolio"/></a></li>
          <li class="center"><a href="http://51qianduan.com/"><img src="images/casetrentine-home_02.jpg"  alt="immagine del portfolio"/></a></li>
          <li class="right"><a href="http://51qianduan.com/"><img src="images/casetrentine-home_03.jpg"  alt="immagine del portfolio"/></a></li>
        </ul>
        <div class="description">
          <p>有时候,突然觉得心情烦躁,看什么都觉得不舒服,心里闷的发慌,拼命想寻找一个出口。</p>
          <p><a href="http://51qianduan.com" class="simple_link">&raquo; 查看详情</a></p>
        </div>
        <!--                <div class="quote"><blockquote></blockquote></div>-->
      </div>
      <div class="work">
        <h3 class="hidden">Bobadilium - Swiss Work Consultant</h3>
        <ul class="images">
          <li class="left"><a href="http://51qianduan.com/"><img src="images/bobadilium-home.jpg" alt="immagine del portfolio"/></a></li>
          <li class="center"><a href="http://51qianduan.com/"><img src="images/bobadilium-home2.jpg"  alt="immagine del portfolio"/></a></li>
          <li class="right"><a href="http://51qianduan.com/"><img src="images/bobadilium-home3.jpg"  alt="immagine del portfolio"/></a></li>
        </ul>
        <div class="description">
          <p>总是在走过某个地方、听到一首歌,或者感到难过的时候想起你,然后看着你的头像不知所措</p>
          <p><a href="http://51qianduan.com" class="simple_link">&raquo; 查看详情</a></p>
        </div>
        <!--                <div class="quote"><blockquote></blockquote></div>-->
      </div>
      <div class="work">
        <h3 class="hidden">Fiart Mare - Yacht di lusso</h3>
        <ul class="images">
          <li class="left"><a href="http://51qianduan.com/"><img src="images/fiart-mare-home.jpg" alt="immagine del portfolio"/></a></li>
          <li class="center"><a href="http://51qianduan.com/"><img src="images/fiart-mare-home2.jpg"  alt="immagine del portfolio"/></a></li>
          <li class="right"><a href="http://51qianduan.com/"><img src="images/fiart-mare-home3.jpg"  alt="immagine del portfolio"/></a></li>
        </ul>
        <div class="description">
          <p>当爱情降临,当意外发生,当一个人走进你的心扉。爱是一场毫无预兆的暴风雨,它会不知何年何月,何世何地,降临到你的头上。</p>
          <p><a href="http://51qianduan.com" class="simple_link">&raquo; 查看详情</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
<br><br><br><br>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到