_jquery焦点图切换代码 jQuery3D焦点广告代码

特效描述：基于jQuery实现 3D焦点广告，基于jQuery实现3D焦点广告

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.53451.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.gallery.js"></script>

3. HTML代码

<div class="container">
<!– Codrops top bar –>
<div class="codrops-top">
<span class="right">
</span>
<div class="clr"></div>
</div><!–/ Codrops top bar –>
<header>
<h1>3D Gallery <span>with CSS3 &amp; jQuery</span></h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Navigation</a>
<a href="index2.html">Auto-Slideshow</a>
<a href="index3.html">3 Elements</a>
</nav>
</header>
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#"><img src="images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a>
<a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
<a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
<a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
<a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
<a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
<a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
<a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a>
<a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
<a href="#"><img src="images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>
<a href="#"><img src="images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a>
<a href="#"><img src="images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a>
</div>
<nav>
<span class="dg-pv">&lt;</span>
<span class="dg-next">&gt;</span>
</nav>
</section>
</div>
<script type="text/javascript">
$(function() {
$(‘#dg-container’).gallery();
});
</script/>

下载地址

立即下载