News新闻

业界新闻动态、技术前沿
Who are we?

您的位置:首页      JS/JQ/AJAX      超级漂亮的国外banner幻灯片效果

超级漂亮的国外banner幻灯片效果

发布日期:2014-03-14 00:00:00 381

不多说了,上图!

 

代码如下

  <!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设计工作室官网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>