jquery.cycle图片幻灯片插件首页banner带图标导航的幻灯片图片滚动



112 446 149



特效描述:幻灯片插件 首页图标导航 幻灯片滚动,

代码结构

1. 引入CSS

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

2. 引入JS

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/banner.js"></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://www.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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">
// 屏蔽JS错误
window.onerror=function(){return true;}
</script>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 自动滚动图片轮播 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 图片滚动 图片滚动条 图标导航 图标菜单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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