焦点图切换特效、jQuery HTML5视差滑动幻灯片代码

特效描述：利用jQ HTML5实现 视差滑动 幻灯片，利用jQ HTML5实现视差滑动幻灯片

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/screen.css?v=1.3" media="screen" />

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

2. 引入JS

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

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

<script src="js/zzsc.js?v=1.4"></script>

3. HTML代码

<section id="content" role="main">
<nav class="cycle-nav-container" role="navigation">
<h2 class="offset">Nawigacja między projektami</h2>
<ul class="list-b" id="cycle-1-nav">
<li class="hitmo"><a href="#hitmo">Hitmo</a></li>
<li class="fastpr"><a href="#fastpr">FastPr</a></li>
<li class="thinkmedia"><a href="#thinkmedia">Thinkmedia</a></li>
<li class="arkana"><a href="#arkana">Arkana</a></li>
<li class="bioway"><a href="#bioway">Bioway</a></li>
<li class="nana"><a href="#nana">Nanaform</a></li>
<li class="akademia"><a href="#akademia">Akademia Social Media</a></li>
</ul>
</nav><!– .cycle-nav-container –>
<section class="box-c cycle-a">
<article class="cycle-item hitmo" id="hitmo" data-thumbnail="hitmo_thumb.png">
<div class="noizzz">
<div class="wrapper-a">
<div class="content">
<h1 class="header-a">Hittin’<br/> the web</h1>
<p>Powstaliśmy aby uderzać mocno i celnie.<br/> Wiele lat pracy z czołowymi agencjami interaktywnymi nauczyło nas jak<br/> działać skutecznie.</p>
<p class="more-a"><a href="http://cxvn.com/" class="link-a">Zobacz co możemy dla Ciebie zrobić</a></p>
</div><!– .content –>
<div class="vis-box">
<p class="image-a"><img src="images/vis-hitmo.png" width="599" height="487" alt=""/></p>
</div>
</div><!– .wrapper-a –>
</div><!– .noizzz –>
</article>
<article class="cycle-item fastpr" id="fastpr" data-thumbnail="fastpr_thumb.png">
<div class="noizzz">
<div class="wrapper-a">
<div class="content">
<h1 class="header-a">Najszybszy<br/> PR w sieci.</h1>
<p>Stworzyliśmy identyfikację wizualną i serwis www dla agencji PR, która oferuje ciekawy sposób na szybkie i skuteczne usługi online.</p>
<p class="more-a"><a href="http://cxvn.com/" class="link-a">Dowiedz się więcej</a></p>
</div><!– .content –>
<div class="vis-box">
<div class="special-box">
<h2 class="header-fastpr">FastPR</h2>
<p class="text-a">Finalista Democamp startups 2010</p>
<p class="democamp"><img src="images/democamp-logo.png" width="133" height="25" alt="Democamp Logo"/></p>
</div><!– .special-box –>
<p class="image-a"><img src="images/vis-fastpr.png" width="458" height="325" alt=""/></p>
</div>
</div><!– .wrapper-a –>
</div><!– .noizzz –>
</article>
<article class="cycle-item thinkmedia" id="thinkmedia" data-thumbnail="thinkmedia_thumb.png">
<div class="noizzz">
<div class="wrapper-a">
<div class="content">
<h1 class="header-a">Nie tylko<br/> dla geeków.</h1>
<p><q>“Najlepsze książki to te, o których każdy czytelnik sądzi, że takie by też napisał.”</q> To zdanie <cite>Blaise Pascala</cite> jest mottem wydawnictwa Thinkmedia, dla którego stworzyliśmy nowy serwis www.</p>
<p class="more-a"><a href="http://cxvn.com/" class="link-a">Dowiedz się więcej</a></p>
</div><!– .content –>
<div class="vis-box">
<p class="image-a"><img src="images/vis-thinkmedia.png" width="471" height="488" alt=""/></p>
</div>
</div><!– .wrapper-a –>
</div><!– .noizzz –>
</article>
<article class="cycle-item arkana" id="arkana" data-thumbnail="arkana_thumb.png">
<div class="noizzz">
<div class="wrapper-a">
<div class="content">
<h1 class="header-a">Prawo dla<br/> biznesu.</h1>
<p>Kancelaria Prawna Arkana na co dzień <br/> pomaga przedsiębiorcom wybrać<br/> korzystne rozwiązania dla ich biznesu. <br/>My pomogliśmy jej w wyborze <br/> odpowiednich rozwiązań internetowych.</p>
<p class="more-a"><a href="http://cxvn.com/" class="link-a">Dowiedz się więcej</a></p>
</div><!– .content –>
<div class="vis-box">
<p class="image-a"><img src="images/vis-arkana.png" width="685" height="420" alt="Vis Arkana"/> <!–<img src="images/project-visuals/vis-arkana.png" width="685" height="420" alt="Vis Arkana"/>–></p>
</div>
</div><!– .wrapper-a –>
</div><!– .noizzz –>
</article>
<article class="cycle-item bioway" id="bioway" data-thumbnail="bioway_thumb.png">
<div class="noizzz">
<div class="wrapper-a">
<div class="content">
<h1 class="header-a">Smacznie<br/> i zdrowo</h1>
<p>Filozofia BIOWAY to sprostanie<br/> oczekiwaniom klientów, którzy dbają<br/> o to, co i w jaki sposób jedzą.<br/> My zadbaliśmy o zdrową obecność<br/> BIOWAY w internecie.</p>
<p class="more-a"><a href="http://cxvn.com/" class="link-a">Dowiedz się więcej</a></p>
</div><!– .content –>
<div class="vis-box">
<p class="image-a">
<img src="images/vis-bioway_2.png" width="589" height="461" alt=""/>
</p>
</div>
</div><!– .wrapper-a –>
</div><!– .noizzz –>
</article>
<article class="cycle-item nana" id="nana" data-thumbnail="nana_thumb.png">
<div class="noizzz">
<div class="wrapper-a">
<div class="content">
<h1 class="header-a">Wnętrze<br/> i forma</h1>
<p>Młode studio projektowe, dla którego<br/> tworzenie wnętrz to przyjemność <br/>i pasja. My z pasją podeszliśmy do<br/> stworzenia ich wizerunku.</p>
<p class="more-a"><a href="http://cxvn.com/" class="link-a">Dowiedz się więcej</a></p>
</div><!– .content –>
<div class="vis-box">
<p class="image-a"><img src="images/vis-nana.png" width="531" height="256" alt=""/></p>
</div>
</div><!– .wrapper-a –>
</div><!– .noizzz –>
</article>
<article class="cycle-item akademia" id="akademia" data-thumbnail="akademia_thumb.png">
<div class="noizzz">
<div class="wrapper-a">
<div class="content">
<h1 class="header-a">Akademia<br/> social<br/> media</h1>
<p>Myślisz że znasz media społecznościowe?<br/> W Akademii Social Media pokażą<br/> Ci takie rzeczy, że ho ho…</p>
<p class="more-a"><a href="http://cxvn.com/" class="link-a lnka-a">Dowiedz się więcej</a></p>
</div><!– .content –>
<div class="vis-box">
<p class="image-a"><img src="images/vis-akademia.png" width="577" height="427" alt=""/></p>
</div>
</div><!– .wrapper-a –>
</div>
</article>
</section>
<section class="box-a" role="complementary">
<div class="wrapper-b">
<ul class="list-c" id="navBoxes" role="navigation">
<li class="what-we-do">
<a href="#">
<h2>Usługi</h2>
<p>Zobacz w czym<br/> możemy Ci pomóc. W tym jesteśmy najlepsi.</p>
<p class="more-b">Więcej</p>
</a>
</li>
<li class="team">
<a href="#">
<h2>Zespół</h2>
<p>Nie trzeba być<br/> “fabryką” by<br/> tworzyć skuteczne<br/> rozwiązania.</p>
<p class="more-b">Więcej</p>
</a>
</li>
<li class="faq">
<a href="#">
<h2>Współpraca</h2>
<p>Etapy współpracy<br/> i wartości jakimi<br/> się kierujemy.</p>
<p class="more-b">Więcej</p>
</a>
</li>
<li class="contact">
<a href="#">
<h2>Kontakt</h2>
<p>Zadaj pytanie,<br/> zapytaj o wycenę,<br/> powiedz cześć.</p>
<p class="more-b">Więcej</p>
</a>
</li>
</ul>
</div>
<div style="width:100%; height:50px;"></div>
</section>
</section>
<script src="js/zzsc.js?v=1.4"></script>
<div style="text-align:center;clear:both">
</div>

下载地址

立即下载