基于HTML5和CSS的焦点图特效轮播滚动切换代码

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

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

以下是基于HTML5和CSS的焦点图特效轮播滚动切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}" />
<title>{title}</title>
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='js/common.js'></script>
<script type='text/javascript' src='js/slider.js'></script>
</head>
<body>

<header>
	<div class="header-content home">
		<div class="parallax-bg" id="slider-wrap">
		<div class="slider parallax-bg" id="slider"> <div class="slider-sections sandbox"> 
		<section class="first"> <img alt="Kendo UI" src="images/home-banner-1.png"/> <div class="text"> <h2>SmartSite Ver 2.2<br />
		智能网站管理系统 </h2> <p class="copy">采用前后台完全分离技术，通过标签（支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等）加模板技术.全站生成纯静态页。</p> <p class="button"><a href="http://13141618.taobao.com/" onclick="_gaq.push(['_trackPageview', 'http://13141618.taobao.com/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://13141618.taobao.com/']);" href="http://13141618.taobao.com/">Learn More</a></p> </div> </section>
		<section> <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" /> <div class="text" style="padding-top: 10px;"> <h2>企业网站管理系统</h2> <p class="copy">单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城，在线支付、配送、支付方式管理、广告等模块。</p> <p class="button"><a href="http://13141618.taobao.com/" onclick="_gaq.push(['_trackPageview', 'http://13141618.taobao.com/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://13141618.taobao.com/']);" href="http://13141618.taobao.com/">Learn More</a></p> </div> </section>
		<section> <img src="images/home_banner_web-q2.png" alt="Kendo UI" /> <div class="text"> <h2>智能移动网站管理系统</h2> <p class="copy">基于jquery.Mobile、HTML5技术框架，前后台完全分离，采用标签加模板技术，全站生成纯静态页。</p> <p class="button"><a href="http://13141618.taobao.com/" onclick="_gaq.push(['_trackPageview', 'http://13141618.taobao.com/']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', 'http://13141618.taobao.com/']);" href="http://13141618.taobao.com/">Learn More</a></p> </div> </section></div> </div> <a class="slider-prev" href="javascript: void(0)">?</a> <a class="slider-next" href="javascript: void(0)">?</a>
		</div>
	</div>
</header>
</body>
</html>

JS代码(common.js):

//Jquery Easingseval(function (p,a,c,k,e,r){
	e = function (c){
	return (c < a ? '':e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29):c.toString(36))}
;
	if (!''.replace(/^/,String)){
	while (c--) r[e(c)] = k[c] || e(c);
	k = [function (e){
	return r[e]}
];
	e = function (){
	return '\\w+'}
;
	c = 1}
;
	while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b','g'),k[c]);
	return p}
('h.i[\'1a\']=h.i[\'z\'];
	h.O(h.i,{
	y:\'D\',z:9(x,t,b,c,d){
	6 h.i[h.i.y](x,t,b,c,d)}
,17:9(x,t,b,c,d){
	6 c*(t/=d)*t+b}
,D:9(x,t,b,c,d){
	6-c*(t/=d)*(t-2)+b}
,13:9(x,t,b,c,d){
	e((t/=d/2)<1)6 c/2*t*t+b;
	6-c/2*((--t)*(t-2)-1)+b}
,X:9(x,t,b,c,d){
	6 c*(t/=d)*t*t+b}
,U:9(x,t,b,c,d){
	6 c*((t=t/d-1)*t*t+1)+b}
,R:9(x,t,b,c,d){
	e((t/=d/2)<1)6 c/2*t*t*t+b;
	6 c/2*((t-=2)*t*t+2)+b}
,N:9(x,t,b,c,d){
	6 c*(t/=d)*t*t*t+b}
,M:9(x,t,b,c,d){
	6-c*((t=t/d-1)*t*t*t-1)+b}
,L:9(x,t,b,c,d){
	e((t/=d/2)<1)6 c/2*t*t*t*t+b;
	6-c/2*((t-=2)*t*t*t-2)+b}
,K:9(x,t,b,c,d){
	6 c*(t/=d)*t*t*t*t+b}
,J:9(x,t,b,c,d){
	6 c*((t=t/d-1)*t*t*t*t+1)+b}
,I:9(x,t,b,c,d){
	e((t/=d/2)<1)6 c/2*t*t*t*t*t+b;
	6 c/2*((t-=2)*t*t*t*t+2)+b}
,G:9(x,t,b,c,d){
	6-c*8.C(t/d*(8.g/2))+c+b}
,15:9(x,t,b,c,d){
	6 c*8.n(t/d*(8.g/2))+b}
,12:9(x,t,b,c,d){
	6-c/2*(8.C(8.g*t/d)-1)+b}
,Z:9(x,t,b,c,d){
	6(t==0)?b:c*8.j(2,10*(t/d-1))+b}
,Y:9(x,t,b,c,d){
	6(t==d)?b+c:c*(-8.j(2,-10*t/d)+1)+b}
,W:9(x,t,b,c,d){
	e(t==0)6 b;
	e(t==d)6 b+c;
	e((t/=d/2)<1)6 c/2*8.j(2,10*(t-1))+b;
	6 c/2*(-8.j(2,-10*--t)+2)+b}
,V:9(x,t,b,c,d){
	6-c*(8.o(1-(t/=d)*t)-1)+b}
,S:9(x,t,b,c,d){
	6 c*8.o(1-(t=t/d-1)*t)+b}
,Q:9(x,t,b,c,d){
	e((t/=d/2)<1)6-c/2*(8.o(1-t*t)-1)+b;
	6 c/2*(8.o(1-(t-=2)*t)+1)+b}
,P:9(x,t,b,c,d){
	f s=1.l;
	f p=0;
	f a=c;
	e(t==0)6 b;
	e((t/=d)==1)6 b+c;
	e(!p)p=d*.3;
	e(a<8.w(c)){
	a=c;
	f s=p/4}
m f s=p/(2*8.g)*8.r(c/a);
	6-(a*8.j(2,10*(t-=1))*8.n((t*d-s)*(2*8.g)/p))+b}
,H:9(x,t,b,c,d){
	f s=1.l;
	f p=0;
	f a=c;
	e(t==0)6 b;
	e((t/=d)==1)6 b+c;
	e(!p)p=d*.3;
	e(a<8.w(c)){
	a=c;
	f s=p/4}
m f s=p/(2*8.g)*8.r(c/a);
	6 a*8.j(2,-10*t)*8.n((t*d-s)*(2*8.g)/p)+c+b}
,T:9(x,t,b,c,d){
	f s=1.l;
	f p=0;
	f a=c;
	e(t==0)6 b;
	e((t/=d/2)==2)6 b+c;
	e(!p)p=d*(.3*1.5);
	e(a<8.w(c)){
	a=c;
	f s=p/4}
m f s=p/(2*8.g)*8.r(c/a);
	e(t<1)6-.5*(a*8.j(2,10*(t-=1))*8.n((t*d-s)*(2*8.g)/p))+b;
	6 a*8.j(2,-10*(t-=1))*8.n((t*d-s)*(2*8.g)/p)*.5+c+b}
,F:9(x,t,b,c,d,s){
	e(s==u)s=1.l;
	6 c*(t/=d)*t*((s+1)*t-s)+b}
,E:9(x,t,b,c,d,s){
	e(s==u)s=1.l;
	6 c*((t=t/d-1)*t*((s+1)*t+s)+1)+b}
,16:9(x,t,b,c,d,s){
	e(s==u)s=1.l;
	e((t/=d/2)<1)6 c/2*(t*t*(((s*=(1.B))+1)*t-s))+b;
	6 c/2*((t-=2)*t*(((s*=(1.B))+1)*t+s)+2)+b}
,A:9(x,t,b,c,d){
	6 c-h.i.v(x,d-t,0,c,d)+b}
,v:9(x,t,b,c,d){
	e((t/=d)<(1/2.k)){
	6 c*(7.q*t*t)+b}
m e(t<(2/2.k)){
	6 c*(7.q*(t-=(1.5/2.k))*t+.k)+b}
m e(t<(2.5/2.k)){
	6 c*(7.q*(t-=(2.14/2.k))*t+.11)+b}
m{
	6 c*(7.q*(t-=(2.18/2.k))*t+.19)+b}
}
,1b:9(x,t,b,c,d){
	e(t<d/2)6 h.i.A(x,t*2,0,c,d)*.5+b;
	6 h.i.v(x,t*2-d,0,c,d)*.5+c*.5+b}
}
);
	',62,74,'||||||return||Math|function|||||if|var|PI|jQuery|easing|pow|75|70158|else|sin|sqrt||5625|asin|||undefined|easeOutBounce|abs||def|swing|easeInBounce|525|cos|easeOutQuad|easeOutBack|easeInBack|easeInSine|easeOutElastic|easeInOutQuint|easeOutQuint|easeInQuint|easeInOutQuart|easeOutQuart|easeInQuart|extend|easeInElastic|easeInOutCirc|easeInOutCubic|easeOutCirc|easeInOutElastic|easeOutCubic|easeInCirc|easeInOutExpo|easeInCubic|easeOutExpo|easeInExpo||9375|easeInOutSine|easeInOutQuad|25|easeOutSine|easeInOutBack|easeInQuad|625|984375|jswing|easeInOutBounce'.split('|'),0,{
}
))

CSS代码(slider.css):

/********************---| GLOBAL TAGS | ***/
*{margin:0;padding:0;outline:none;}
html{height:100%;}
body{/*font:13px/18px 'lucida sans regular','lucida sans',arial,helvetica,sans-serif;*/
font:13px/21px 'Lucida Sans Unicode','Lucida Grande',Arial,Helvetica,sans-serif;color:#444;min-width:940px;height:100%;background:#fff;}
img{border:none;}
/*******************---| Header | ***/
header{width:100%;margin:0 auto;position:relative;color:#ffffff;/* background:url(images/layout/bg-header.png) repeat-x 0 0;*/
background:#efefef;overflow:hidden;}
header .centered-content{position:relative;z-index:2;}
header a{color:#2e2e2e;}
header .header-content a{color:#fff;text-decoration:underline;}
/* Header text */
.header-content{background:url(../images/header-background.jpg?v=1) no-repeat 50% -4px #d64516;margin:0;padding:0;float:left;width:100%;line-height:22px;position:relative;z-index:1;border-top:1px solid #fff;-webkit-box-shadow:inset 0px 10px 8px -10px rgba(0,0,0,0.5),inset 0px -10px 8px -10px rgba(0,0,0,0.4);-moz-box-shadow:inset 0px 10px 8px -10px rgba(0,0,0,0.5),inset 0px -10px 8px -10px rgba(0,0,0,0.4);box-shadow:inset 0px 10px 8px -10px rgba(0,0,0,0.5),inset 0px -10px 8px -10px rgba(0,0,0,0.4);}
.header-content.home{height:362px;}
.home .header-content{background:#d54515 url(../images/slider-gradient-bg.png) repeat-y 50% 0;}
/*.header-content-wrap{width:940px;margin:0 auto;}
*/
.header-content img{float:left;margin:0 0 0 15px;}
.header-content .text{width:470px;margin-left:50%;*width:430px;}
.header-content .copy{font-size:14px;line-height:21px;padding-right:15px;}
.header-content .button{width:100% !important;}
.header-content .button a{padding-top:7px;padding-bottom:7px;font-size:14px;display:inline-block;}
/*#slider .text{width:417px;}
*/
/*fix the button position for the slide*/
.header-content .button{float:none;}
.header-content .dimmed{background:#b05b1b;background:rgba(0,0,0,0.4);-webkit-transition:none;/* Saf3.2+,Chrome */
 -moz-transition:none;/* FF4+ */
 -ms-transition:none;/* IE10? */
 -o-transition:none;/* Opera 10.5+ */
 transition:none;}
.header-content .align-bottom{position:absolute;bottom:0px;}
/* => Slider <= */
#slider-wrap{background:url(../images/header-background1.png?v=1) repeat-x 0% 0;height:362px;}
#slider{background:url(../images/header-background2.png?v=1) repeat-x 0% 0;height:332px;padding-top:30px;}
/* => SLIDE PREV AND NEXT ARROWS <= */
.slider-prev,.slider-next{text-indent:-9999px;width:38px;height:38px;background:url("../images/sprite.png") -263px -122px no-repeat;position:absolute;top:50%;margin-top:-19px;z-index:999;opacity:.5;-webkit-transition:all 0.3s ease-out;/* Saf3.2+,Chrome */
 -moz-transition:all 0.3s ease-out;/* FF4+ */
 -ms-transition:all 0.3s ease-out;/* IE10? */
 -o-transition:all 0.3s ease-out;/* Opera 10.5+ */
 transition:all 0.3s ease-out;display:none}
.slider-prev{left:12px;}
.slider-next{right:12px;background-position:-302px -122px;}
.slider-prev:hover,.slider-next:hover{opacity:1;}
/* => SLIDER NAV o o o <= */
.slider-nav{position:absolute;bottom:5px;left:50%;list-style:none;overflow:hidden;padding:2px;z-index:10;margin:0;}
.slider-nav li{float:left;}
.slider-nav li a{display:block;width:8px;height:8px;overflow:hidden;padding:0px;margin:8px;background:url("../images/sprite.png") no-repeat -234px -144px;text-decoration:none;text-indent:-999px;}
.slider-nav li a:hover,.slider-nav li a.selected{background-position:-225px -144px;}
/* => HOLY SLIDES <= */
.slider section{display:none;}
.slider section.first{display:block;}
.slider-sections,.slider-sections section{width:861px;height:335px;}
.slider-sections{margin:0 auto;position:relative;}
.slider-sections section{position:absolute;top:0;left:0px;}
.header-content h2{font:400 32px/1.2 "microsoft yahei",Tahoma,arial,sans-serif;color:#fff;margin:0 0 26px;}
.header-content p{margin:0 0 30px;}
.header-content .centered-content{padding-top:30px;padding-bottom:10px;}
.button{float:left;width:auto !important;list-style:none;}
.button a,.button button,.button input{/* Standard black button */
 font-size:15px;/*font-family:'lucida sans',arial,helvetica,sans-serif;*/
 line-height:18px;color:#fff !important;text-decoration:none;padding:5px 14px 6px 13px;display:block;width:auto;position:relative;z-index:2;border:none;-moz-border-radius:3px;border-radius:3px;cursor:pointer;background:#313131;/* Old browsers */
background:-moz-linear-gradient(top,#313131 0%,#222222 100%);/* FF3.6+ */
background:-webkit-linear-gradient(top,#313131 0%,#222222 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#313131 0%,#222222 100%);/* Opera11.10+ */
background:-ms-linear-gradient(top,#313131 0%,#222222 100%);/* IE10+ */
background:linear-gradient(top,#313131 0%,#222222 100%);/* W3C */
-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
.button a:hover,.button input:hover,.button button:hover,.button a:focus,.button input:focus,.button button:focus{background:#464646;/* Old browsers */
background:-moz-linear-gradient(top,#464646 0%,#393939 100%);/* FF3.6+ */
background:-webkit-linear-gradient(top,#464646 0%,#393939 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#464646 0%,#393939 100%);/* Opera11.10+ */
background:-ms-linear-gradient(top,#464646 0%,#393939 100%);/* IE10+ */
background:linear-gradient(top,#464646 0%,#393939 100%);/* W3C */
}
header .header-content .button a,#content .button a:hover{text-decoration:none;}
.header-content .beta-ribbons{position:absolute;height:120px;width:85px;text-indent:-200px;overflow:hidden;background:url(../images/kendo-ribbons.png) no-repeat 0 0;}
.header-content .beta-ribbons.ribbon-1{background-position:-170px 0;top:-3px;right:-145px;}
.header-content p.copy .beta-ribbons.ribbon-1{top:-135px;left:900px;}
.header-content .beta-ribbons.ribbon-4{background-position:-255px 0;left:-62px;top:-30px;z-index:10;text-indent:-2000px;}

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