以下是 jQuery左右全屏焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
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=utf-8" />
<title>jQuery左右全屏焦点图</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--[if lt IE 8]><link href="css/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript" src="js/ie6png.js"></script>
<![endif]-->
</head>
<body>
<div class="carousel">
<div class="view">
<div class="view-content">
<div class="wrap carousel-item">
<div class="slide-caption comp-d" >
<h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_title', 'OffsiteClick', '#', 4]);">创意与技术完美结合<br />
每一个项目均为按需定制</a></h2>
<div class="slide-callout">
<p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_subtitle', 'OffsiteClick', '#', 4]);">提供ios、Android、web开发，网站建设等互联网服务</a></p>
<p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_more', 'OffsiteClick', '#', 4]);">Read More…</a></p>
</div>
</div>
<div class="carousel-image">
<!-- 上传图片大小 width="522" height="348" -->
<a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc6.jpg" width="522" height="348" alt="提供ios、Android、web开发，网站建设等互联网服务" /></a> </div>
</div>
<div class="wrap carousel-item">
<div class="slide-caption comp-c" >
<h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_title', 'OffsiteClick', '#', 4]);">国际化风格<br />
世界级品质标准</a></h2>
<div class="slide-callout">
<p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_subtitle', 'OffsiteClick', '#', 4]);">好的作品需要宽广的视野、前瞻的眼光及对品牌的深度认知</a></p>
<p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_more', 'OffsiteClick', '#', 4]);">Read More…</a></p>
</div>
</div>
<div class="carousel-image">
<!-- 上传图片大小 width="522" height="348" -->
<a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc5.jpg" width="522" height="348" alt="好的作品需要宽广的视野、前瞻的眼光及对品牌的深度认知" /></a> </div>
</div>
<div class="wrap carousel-item">
<div class="slide-caption comp-a" >
<h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_title', 'OffsiteClick', '#', 4]);">
<p> 企业级APP定制开发</p>
<p> 丰富的移动app开发经验</p>
</a></h2>
<div class="slide-callout">
<p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_subtitle', 'OffsiteClick', '#', 4]);">优秀团队打造极致的交互体验作品</a></p>
<p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_more', 'OffsiteClick', '#', 4]);">Read More…</a></p>
</div>
</div>
<div class="carousel-image">
<!-- 上传图片大小 width="522" height="348" -->
<a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc4.jpg" width="522" height="348" alt="优秀团队打造极致的交互体验作品" /></a> </div>
</div>
<div class="wrap carousel-item">
<div class="slide-caption comp-a" >
<h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_title', 'OffsiteClick', '#', 4]);">
<p> 响应式网页设计</p>
<p> 网站可在多种浏览设备浏览</p>
</a></h2>
<div class="slide-callout">
<p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_subtitle', 'OffsiteClick', '#', 4]);">可使网站从桌面电脑显示器到移动电话或其他移动产品设备上阅读和浏览</a></p>
<p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_more', 'OffsiteClick', '#', 4]);">Read More…</a></p>
</div>
</div>
<div class="carousel-image">
<!-- 上传图片大小 width="522" height="348" -->
<a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc3.jpg" width="522" height="348" alt="可使网站从桌面电脑显示器到移动电话或其他移动产品设备上阅读和浏览" /></a> </div>
</div>
<div class="wrap carousel-item">
<div class="slide-caption comp-c" >
<h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_title', 'OffsiteClick', '#', 4]);">决胜移动互联网<br />
迈步进入企业级应用</a></h2>
<div class="slide-callout">
<p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_subtitle', 'OffsiteClick', '#', 4]);">Android将是未来移动企业级应用的主要平台</a></p>
<p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_more', 'OffsiteClick', '#', 4]);">Read More…</a></p>
</div>
</div>
<div class="carousel-image">
<!-- 上传图片大小 width="522" height="348" -->
<a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc2.jpg" width="522" height="348" alt="Android将是未来移动企业级应用的主要平台" /></a> </div>
</div>
<div class="wrap carousel-item">
<div class="slide-caption comp-d" >
<h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_title', 'OffsiteClick', '#', 4]);">零售商正依赖<br />
移动应用提高客户忠诚度</a></h2>
<div class="slide-callout">
<p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_subtitle', 'OffsiteClick', '#', 4]);">更大的购物篮，客户体验及忠诚度得到提升，且品牌覆盖更广</a></p>
<p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_more', 'OffsiteClick', '#', 4]);">Read More…</a></p>
</div>
</div>
<div class="carousel-image">
<!-- 上传图片大小 width="522" height="348" -->
<a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc1.jpg" width="522" height="348" alt="更大的购物篮，客户体验及忠诚度得到提升，且品牌覆盖更广" /></a> </div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/functions.js"></script>
</body>
</html>JS代码(DD_belatedPNG_0.0.8a-min.js):
/*** DD_belatedPNG:Adds IE6 support:PNG images for CSS background-image and HTML <IMG/>.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_belatedPNG/* Version:0.0.8a* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_belatedPNG/#license** Example usage:* DD_belatedPNG.fix('.png_bg');
// argument is a CSS selector* DD_belatedPNG.fixPng( someNode );
// argument is an HTMLDomElement**/
var DD_belatedPNG={
ns:"DD_belatedPNG",imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function(){
if(document.namespaces&&!document.namespaces[this.ns]){
document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}
}
,createVmlStyleSheet:function(){
var b,a;
b=document.createElement("style");
b.setAttribute("media","screen");
document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
if(b.styleSheet){
b=b.styleSheet;
b.addRule(this.ns+"\\:*","{
behavior:url(#default#VML)}
");
b.addRule(this.ns+"\\:shape","position:absolute;
");
b.addRule("img."+this.ns+"_sizeFinder","behavior:none;
border:none;
position:absolute;
z-index:-1;
top:-10000px;
visibility:hidden;
");
this.screenStyleSheet=b;
a=document.createElement("style");
a.setAttribute("media","print");
document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
a=a.styleSheet;
a.addRule(this.ns+"\\:*","{
display:none !important;
}
");
a.addRule("img."+this.ns+"_sizeFinder","{
display:none !important;
}
")}
}
,readPropertyChange:function(){
var b,c,a;
b=event.srcElement;
if(!b.vmlInitiated){
return}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
DD_belatedPNG.applyVML(b)}
if(event.propertyName=="style.display"){
c=(b.currentStyle.display=="none")?"none":"block";
for(a in b.vml){
if(b.vml.hasOwnProperty(a)){
b.vml[a].shape.style.display=c}
}
}
if(event.propertyName.search("filter")!=-1){
DD_belatedPNG.vmlOpacity(b)}
}
,vmlOpacity:function(b){
if(b.currentStyle.filter.search("lpha")!=-1){
var a=b.currentStyle.filter;
a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
b.vml.color.shape.style.filter=b.currentStyle.filter;
b.vml.image.fill.opacity=a}
}
,handlePseudoHover:function(a){
setTimeout(function(){
DD_belatedPNG.applyVML(a)}
,1)}
,fix:function(a){
if(this.screenStyleSheet){
var c,b;
c=a.split(",");
for(b=0;
b<c.length;
b++){
this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}
}
}
,applyVML:function(a){
a.runtimeStyle.cssText="";
this.vmlFill(a);
this.vmlOffsets(a);
this.vmlOpacity(a);
if(a.isImg){
this.copyImageBorders(a)}
}
,attachHandlers:function(i){
var d,c,g,e,b,f;
d=this;
c={
resize:"vmlOffsets",move:"vmlOffsets"}
;
if(i.nodeName=="A"){
e={
mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"}
;
for(b in e){
if(e.hasOwnProperty(b)){
c[b]=e[b]}
}
}
for(f in c){
if(c.hasOwnProperty(f)){
g=function(){
d[c[f]](i)}
;
i.attachEvent("on"+f,g)}
}
i.attachEvent("onpropertychange",this.readPropertyChange)}
,giveLayout:function(a){
a.style.zoom=1;
if(a.currentStyle.position=="static"){
a.style.position="relative"}
}
,copyImageBorders:function(b){
var c,a;
c={
borderStyle:true,borderWidth:true,borderColor:true}
;
for(a in c){
if(c.hasOwnProperty(a)){
b.vml.color.shape.style[a]=b.currentStyle[a]}
}
}
,vmlFill:function(e){
if(!e.currentStyle){
return}
else{
var d,f,g,b,a,c;
d=e.currentStyle}
for(b in e.vml){
if(e.vml.hasOwnProperty(b)){
e.vml[b].shape.style.zIndex=d.zIndex}
}
e.runtimeStyle.backgroundColor="";
e.runtimeStyle.backgroundImage="";
f=true;
if(d.backgroundImage!="none"||e.isImg){
if(!e.isImg){
e.vmlBg=d.backgroundImage;
e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}
else{
e.vmlBg=e.src}
g=this;
if(!g.imgSize[e.vmlBg]){
a=document.createElement("img");
g.imgSize[e.vmlBg]=a;
a.className=g.ns+"_sizeFinder";
a.runtimeStyle.cssText="behavior:none;
position:absolute;
left:-10000px;
top:-10000px;
border:none;
margin:0;
padding:0;
";
c=function(){
this.width=this.offsetWidth;
this.height=this.offsetHeight;
g.vmlOffsets(e)}
;
a.attachEvent("onload",c);
a.src=e.vmlBg;
a.removeAttribute("width");
a.removeAttribute("height");
document.body.insertBefore(a,document.body.firstChild)}
e.vml.image.fill.src=e.vmlBg;
f=false}
e.vml.image.fill.on=!f;
e.vml.image.fill.color="none";
e.vml.color.shape.style.backgroundColor=d.backgroundColor;
e.runtimeStyle.backgroundImage="none";
e.runtimeStyle.backgroundColor="transparent"}
,vmlOffsets:function(d){
var h,n,a,e,g,m,f,l,j,i,k;
h=d.currentStyle;
n={
W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop}
;
a=(n.L+n.bLW==1)?1:0;
e=function(b,p,q,c,s,u){
b.coordsize=c+","+s;
b.coordorigin=u+","+u;
b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
b.style.width=c+"px";
b.style.height=s+"px";
b.style.left=p+"px";
b.style.top=q+"px"}
;
e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
g={
X:0,Y:0}
;
if(d.isImg){
g.X=parseInt(h.paddingLeft,10)+1;
g.Y=parseInt(h.paddingTop,10)+1}
else{
for(j in g){
if(g.hasOwnProperty(j)){
this.figurePercentage(g,n,j,h["backgroundPosition"+j])}
}
}
d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
m=h.backgroundRepeat;
f={
T:1,R:n.W+a,B:n.H,L:1+a}
;
l={
X:{
b1:"L",b2:"R",d:"W"}
,Y:{
b1:"T",b2:"B",d:"H"}
}
;
if(m!="repeat"||d.isImg){
i={
T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)}
;
if(m.search("repeat-")!=-1){
k=m.split("repeat-")[1].toUpperCase();
i[l[k].b1]=1;
i[l[k].b2]=n[l[k].d]}
if(i.B>n.H){
i.B=n.H}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}
else{
d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}
}
,figurePercentage:function(d,c,f,a){
var b,e;
e=true;
b=(f=="X");
switch(a){
case"left":case"top":d[f]=0;
break;
case"center":d[f]=0.5;
break;
case"right":case"bottom":d[f]=1;
break;
default:if(a.search("%")!=-1){
d[f]=parseInt(a,10)/100}
else{
e=false}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
if(d[f]%2===0){
d[f]++}
return d[f]}
,fixPng:function(c){
c.style.behavior="none";
var g,b,f,a,d;
if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
return}
c.isImg=false;
if(c.nodeName=="IMG"){
if(c.src.toLowerCase().search(/\.png$/)!=-1){
c.isImg=true;
c.style.visibility="hidden"}
else{
return}
}
else{
if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
return}
}
g=DD_belatedPNG;
c.vml={
color:{
}
,image:{
}
}
;
b={
shape:{
}
,fill:{
}
}
;
for(a in c.vml){
if(c.vml.hasOwnProperty(a)){
for(d in b){
if(b.hasOwnProperty(d)){
f=g.ns+":"+d;
c.vml[a][d]=document.createElement(f)}
}
c.vml[a].shape.stroked=false;
c.vml[a].shape.appendChild(c.vml[a].fill);
c.parentNode.insertBefore(c.vml[a].shape,c)}
}
c.vml.image.shape.fillcolor="none";
c.vml.image.fill.type="tile";
c.vml.color.fill.on=false;
g.attachHandlers(c);
g.giveLayout(c);
g.giveLayout(c.offsetParent);
c.vmlInitiated=true;
g.applyVML(c)}
}
;
try{
document.execCommand("BackgroundImageCache",false,true)}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();
JS代码(ie6png.js):
// ie6 png透明JSDD_belatedPNG.fix('.logo a,.header,.hotline p,.companylist,.TOP,.messageBox,.title,.subNav li a,.more,.back a,.control a,.png,.png:hover,img');
CSS代码(zzsc.css):
@charset "utf-8";*{margin:0;padding:0;}
img{border:none;}
ul,li{list-style:none;}
.wrap{width:978px;margin:0 auto;}
.carousel{height:348px;overflow:hidden;background:#262626;}
.carousel .wrap{position:relative;}
.slide-caption{position:relative;z-index:10;float:left;width:376px;min-height:280px;padding:68px 40px 0;background-image:url(../images/vignette.png);background-position:left top;background-repeat:no-repeat;}
.comp-a{background-color:#52854c;}
.comp-b{background-color:#8c8179;}
.comp-c{background-color:#293352;}
.comp-d{background-color:#a51c30;}
.slide-caption h2{margin-bottom:32px;color:#fff;font-size:30px;line-height:38px;font-family:'FZLTXHKM';font-weight:normal;}
.slide-caption h2 a{color:#fff;text-decoration:none;}
.slide-caption h2 a:hover,.slide-caption h2 a:focus{color:#e6eae2;text-decoration:none;}
.slide-callout{width:900px;}
.slide-callout p{float:left;max-width:750px;line-height:20px;padding:8px 30px 7px 12px;background:#fff;background:rgba(255,255,255,.9);color:#363636;font-size:16px;font-family:'FZLTXHKM';font-weight:normal;}
.slide-callout p:hover{background:#e6eae2;}
.slide-callout p a{color:#363636;text-decoration:none;}
.slide-callout p a:hover,.slide-callout p a:focus{color:#363636;text-decoration:none;}
.slide-callout .more{padding:0;}
.comp-a .slide-callout .more{background-color:#52854c;}
.comp-b .slide-callout .more{background-color:#8c8179;}
.comp-c .slide-callout .more{background-color:#293352;}
.comp-d .slide-callout .more{background-color:#a51c30;}
.slide-callout .more a{display:inline-block;line-height:20px;padding:8px 10px 7px;background:none;color:#fff;text-transform:none;font-weight:normal;font-style:italic;font-family:Georgia,"Times New Roman",serif;}
.slide-callout .more a:hover,.slide-callout .more a:focus{background:#000;text-decoration:none;color:#fff;}
.carousel-image{position:absolute;right:0;}
.carousel-item{position:relative;}
.carousel-item-secondary{display:none;}
/*------------------------------------------- Homepage Caraousel-------------------------------------------*/
* html .carousel{height:348px !important;}
* html .slide-caption{background-image:none !important;height:220px;}
* html .carousel-item{height:348px;}
.comp-b,.comp-b .slide-callout .more{background-color:#8c8179;}
.comp-c,.comp-c .slide-callout .more{background-color:#293352;}
.comp-d,.comp-d .slide-callout .more{background-color:#a51c30;}
.carousel-controls{position:absolute;z-index:100;left:50%;bottom:43px;width:98px;height:32px;margin-left:-449px;overflow:hidden;}
* html .carousel-controls{bottom:20px;}
.carousel-controls a{float:left;display:block;width:32px;height:32px;text-indent:-9999px;background-image:url(../images/controls-carousel.gif);background-color:transparent;background-position:0 0;background-repeat:no-repeat;overflow:hidden;}
.carousel-controls .next{background-position:-99px -32px;border-left:1px solid #333;}
.carousel-controls .next:hover,.carousel-controls .next:focus{background-position:-99px 0;border-color:#ccc;}
.carousel-controls .previous{background-position:0 -32px;}
.carousel-controls .previous:hover,.carousel-controls .previous:focus{background-position:0 0;}
.carousel-controls .pause{background-position:-33px -32px;border-left:1px solid #333;}
.carousel-controls .pause:hover,.carousel-controls .pause:focus{background-position:-33px 0;border-color:#ccc;}
.carousel-controls .play{position:relative;bottom:auto;left:auto;background-position:-66px -32px;border-left:1px solid #333;}
.carousel-controls .play:hover,.carousel-controls .play:focus{background-position:-66px 0;border-color:#ccc;}
.carousel .prev-image{position:absolute;left:-978px;top:0;opacity:0.2;}
.carousel .next-image{position:absolute;top:0;right:-522px;opacity:0.2;}
分享到QQ
分享到微博
微信扫一扫
