jQuery+css3渐变焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+css3渐变焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery+css3渐变焦点图</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" media="screen, print" href="css/basic.css" />
<link rel="stylesheet" media="screen" href="css/screen.css" />
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript" src="js/featured.js"></script>
</head>
<body id="home-page">
<div id="wrap">
	<div id="content">

	<section id="featured">
		<div id="slides">
		
		<section id="slide-1" class="alt">
			<img src="img/0140_foodsense.jpg" alt="What's Cooking? " />
			<a href="#">
			<h1>What&#39;s Cooking? </h1>
			<h2>Browse our gallery for dependably delicious recipes. </h2>
			</a>
			<p class="credit">photo by Clare Barboza</p>
		</section>
	
	
	<section id="slide-2" >
			<img src="img/0219_foodsense.jpg" alt="Read, Learn, Share" />
			<a href="#">
			<h1>Read, Learn, Share</h1>
			<h2>Get daily how-tos, stories &amp; updates with the latest news. </h2>
			</a>
			<p class="credit">photo by Clare Barboza</p>		</section>
	
	
	<section id="slide-3" class="alt">
			<img src="img/0052_foodsense.jpg" alt="Shop for the Best" />
			<a href="#">
			<h1>Shop for the Best</h1>
			<h2>With our carefully curated vendor list, you&#39;ll know what to buy.
			</h2>
			</a>
			<p class="credit">photo by Clare Barboza</p>		</section>
	
	
	<section id="slide-4" >
			<img src="img/0232_foodsense.jpg" alt="Share your Food Sense" />
			<a href="#">
			<h1>Share your Food Sense</h1>
			<h2>Submit your favorite recipes, become a contributor, or get 
			interviewed.</h2>
			</a>
			<p class="credit">photo by Clare Barboza</p>		</section>
	
		</div>
		<div id="nav">
			<ul>
				<li id="feature-1"><a href="#">
				<h3>Tastemakers</h3>
				<p>Feast your eyes &amp; get recipes!</p>
				</a></li>
				<li id="feature-2"><a href="#">
				<h3>Blog</h3>
				<p>News, how-tos, stories, and more</p>
				</a></li>
				<li id="feature-3"><a href="#">
				<h3>The A-List</h3>
				<p>Handpicked, absolute favorites</p>
				</a></li>
				<li id="feature-4"><a href="#">
				<h3>Contribute</h3>
				<p>We want to hear from you!</p>
				</a></li>
			</ul>
		</div>
	
</section>
	</div>
</body>
</html>

JS代码(featured.js):

// HOMEPAGE SLIDESHOW$('#slides').cycle({
	fx:'fade',speed:500,timeout:4000,pause:true,pager:'#featured #nav ul',pagerAnchorBuilder:function(idx,slide){
	// return selector string for existing anchor return '#featured #nav li:eq(' + idx + ') a';
}
}
);

JS代码(scripts.js):

// FORMALIZEvar FORMALIZE=function(a,b,c,d){
	var e="placeholder"in c.createElement("input"),f="autofocus"in c.createElement("input"),g=!!a.browser.msie&&parseInt(a.browser.version,10)===6,h=!!a.browser.msie&&parseInt(a.browser.version,10)===7;
	return{
	go:function(){
	for(var a in FORMALIZE.init)FORMALIZE.init[a]()}
,init:{
	full_input_size:function(){
	!!h&&!!a("textarea,input.input_full").length&&a("textarea,input.input_full").wrap('<span class="input_full_wrap"></span>')}
,ie6_skin_inputs:function(){
	if(!!g&&!!a("input,select,textarea").length){
	var b=/button|submit|reset/,c=/date|datetime|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/;
	a("input").each(function(){
	var d=a(this);
	this.getAttribute("type").match(b)?(d.addClass("ie6_button"),this.disabled&&d.addClass("ie6_button_disabled")):this.getAttribute("type").match(c)&&(d.addClass("ie6_input"),this.disabled&&d.addClass("ie6_input_disabled"))}
),a("textarea,select").each(function(){
	this.disabled&&a(this).addClass("ie6_input_disabled")}
)}
}
,autofocus:function(){
	!f&&!!a(":input[autofocus]").length&&a(":input[autofocus]:visible:first").focus()}
,placeholder:function(){
	!e&&!!a(":input[placeholder]").length&&(FORMALIZE.misc.add_placeholder(),a(":input[placeholder]").each(function(){
	var b=a(this),c=b.attr("placeholder");
	b.focus(function(){
	b.val()===c&&b.val("").removeClass("placeholder_text")}
).blur(function(){
	FORMALIZE.misc.add_placeholder()}
),b.closest("form").submit(function(){
	b.val()===c&&b.val("").removeClass("placeholder_text")}
).bind("reset",function(){
	setTimeout(FORMALIZE.misc.add_placeholder,50)}
)}
))}
}
,misc:{
	add_placeholder:function(){
	!e&&!!a(":input[placeholder]").length&&a(":input[placeholder]").each(function(){
	var b=a(this),c=b.attr("placeholder");
	(!b.val()||b.val()===c)&&b.val(c).addClass("placeholder_text")}
)}
}
}
}
(jQuery,this,this.document);
	jQuery(document).ready(function(){
	FORMALIZE.go()}
)

CSS代码(basic.css):

/*Title:CSS basics for archaic browsers (I'm looking at you IE6) + print stylesfoodsense.is/* -------------------------------------------- */
body{background-color:#FFF;margin:0;padding:5%;font-family:"Georgia",serif;color:#333;}
/* PRINT STYLES */
@media print{body{margin:5pt 10pt;font-size:10pt;line-height:120%;background:white;}
nav,#featured,#newsletter,aside[role="social"],aside[role="sub"],#share,#comments,footer .social,article footer,.facebook-like,#pagination{display:none;}
img{max-width:auto;}
article h1{font-size:16pt;}
article h2{font-size:14pt;}
.recipe h2{font-size:10pt;}
article h3{font-size:12pt;}
article h4{font-size:10pt;}
article .recipe{margin:40pt 0;}
.recipe .photo{float:right;width:150pt;height:auto;margin:0 0 20pt 20pt;}
.recipe .photo img{width:150pt;height:auto;}
/* Print URLs after link text */
#content .group a:link:after,#content .group a:visited:after,footer a:link:after,footer a:visited:after{content:" (" attr(href) ") ";}
}

附件:下载该文件资源,减少时间成本(增值服务)