相關(guān)關(guān)鍵詞
關(guān)于我們
最新文章
- 拉動懸浮于頂部的JS控制代碼
- 在JavaScript中構(gòu)建ArrayList示例代碼
- js使用for循環(huán)及if語句判斷多個一樣的name
- JavaScript中判斷原生函數(shù)檢查function是否是原生代碼
- jQuery CSS()方法改變現(xiàn)有的CSS樣式表
- JavaScript中判斷原生函數(shù)檢查function是否是原生代碼
- jQuery動畫高級用法(上)——詳解animation中的.queue()函數(shù)
- python小技巧之批量抓取美女圖片
- JS中offsetTop、clientTop、scrollTop、offsetTop各屬性介紹
- JS獲取瀏覽器窗口大小 獲取屏幕,瀏覽器,網(wǎng)頁高度寬度
超級漂亮的國外banner幻燈片效果
不多說了,上圖!
代碼如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<title>波蘭hitmo設(shè)計工作室官網(wǎng)banner幻燈片效果</title> | |
<link rel="stylesheet" href="css/screen.css" rel="external nofollow" target="_blank">css/screen.css" media="screen" /> | |
<!--主要樣式--> | |
<link href="css/style.css" type="text/css" rel="stylesheet"> | |
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> | |
</head> | |
<body> | |
<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://www.17sucai.com/" class="link-a">Zobacz co mo?emy dla Ciebie zrobi?</a></p> | |
</div> | |
<div class="vis-box"> | |
<p class="image-a"><img src="images/vis-hitmo.png" width="599" height="487" alt=""/></p> | |
</div> | |
</div> | |
</div> | |
</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://www.17sucai.com/" class="link-a">Dowiedz si? wi?cej</a></p> | |
</div> | |
<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> | |
<p class="image-a"><img src="images/vis-fastpr.png" width="458" height="325" alt=""/></p> | |
</div> | |
</div> | |
</div> | |
</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://www.17sucai.com/" class="link-a">Dowiedz si? wi?cej</a></p> | |
</div> | |
<div class="vis-box"> | |
<p class="image-a"><img src="images/vis-thinkmedia.png" width="471" height="488" alt=""/></p> | |
</div> | |
</div> | |
</div> | |
</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://www.17sucai.com/" class="link-a">Dowiedz si? wi?cej</a></p> | |
</div> | |
<div class="vis-box"> | |
<p class="image-a"><img src="images/vis-arkana.png" width="685" height="420" alt="Vis Arkana"/> | |
</p> | |
</div> | |
</div> | |
</div> | |
</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://www.17sucai.com/" class="link-a">Dowiedz si? wi?cej</a></p> | |
</div> | |
<div class="vis-box"> | |
<p class="image-a"> <img src="images/vis-bioway_2.png" width="589" height="461" alt=""/> </p> | |
</div> | |
</div> | |
</div> | |
</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://www.17sucai.com/" class="link-a">Dowiedz si? wi?cej</a></p> | |
</div> | |
<div class="vis-box"> | |
<p class="image-a"><img src="images/vis-nana.png" width="531" height="256" alt=""/></p> | |
</div> | |
</div> | |
</div> | |
</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://www.17sucai.com/" class="link-a lnka-a">Dowiedz si? wi?cej</a></p> | |
</div> | |
<div class="vis-box"> | |
<p class="image-a"><img src="images/vis-akademia.png" width="577" height="427" alt=""/></p> | |
</div> | |
</div> | |
</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 type="text/javascript" src="js/jquery.min.js"></script> | |
<script type="text/javascript" src="js/banner.js"></script> | |
<script type="text/javascript"> | |
// 屏蔽JS錯誤 | |
window.onerror=function(){return true;} | |
</script> | |
</body> | |
</html> | |