jQuery经典大气简洁焦点广告图特效代码

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

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

以下是 jQuery经典大气简洁焦点广告图特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery经典简洁带说明文字焦点广告</title>
	<link rel="stylesheet" href="css/global.css">
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
</head>
<body>
	<div id="container">
		<div id="example">
			<img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
			<div id="slides">
				<div class="slides_container">
					<div class="slide">
						<a href="#/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
						<div class="caption" style="bottom:0">
							<p>Happy Bokeh Thursday!</p>
						</div>
					</div>
					<div class="slide">
						<a href="#/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
						<div class="caption">
							<p>Taxi</p>
						</div>
					</div>
					<div class="slide">
						<a href="#/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
						<div class="caption">
							<p>Happy Bokeh raining Day</p>
						</div>
					</div>
					<div class="slide">
						<a href="#/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
						<div class="caption">
							<p>We Eat Light</p>
						</div>
					</div>
					<div class="slide">
						<a href="#/photos/bu7amd/3447416780/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
						<div class="caption">
							<p>&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>
						</div>
					</div>
					<div class="slide">
						<a href="#/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
						<div class="caption">
							<p>twelve.inch</p>
						</div>
					</div>
					<div class="slide">
						<a href="#/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
						<div class="caption">
							<p>Save my love for loneliness</p>
						</div>
					</div>
				</div>
				<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
	</div>
</body>
</html>

JS代码(slides.min.jquery.js):

/** Slides,A Slideshow Plugin for jQuery* Intructions:http://slidesjs.com* By:Nathan Searles,http://nathansearles.com* Version:1.1.8* Updated:June 1st,2011** Licensed under the Apache License,Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing,software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
(function(A){
	A.fn.slides=function(B){
	B=A.extend({
}
,A.fn.slides.option,B);
	return this.each(function(){
	A("."+B.container,A(this)).children().wrapAll('<div class="slides_control"/>');
	var V=A(this),J=A(".slides_control",V),Z=J.children().size(),Q=J.children().outerWidth(),M=J.children().outerHeight(),D=B.start-1,L=B.effect.indexOf(",")<0?B.effect:B.effect.replace(" ","").split(",")[0],S=B.effect.indexOf(",")<0?L:B.effect.replace(" ","").split(",")[1],O=0,N=0,C=0,P=0,U,H,I,X,W,T,K,F;
	function E(c,b,a){
	if(!H&&U){
	H=true;
	B.animationStart(P+1);
	switch(c){
	case"next":N=P;
	O=P+1;
	O=Z===O?0:O;
	X=Q*2;
	c=-Q*2;
	P=O;
	break;
	case"prev":N=P;
	O=P-1;
	O=O===-1?Z-1:O;
	X=0;
	c=0;
	P=O;
	break;
	case"pagination":O=parseInt(a,10);
	N=A("."+B.paginationClass+" li."+B.currentClass+" a",V).attr("href").match("[^#/]+$");
	if(O>N){
	X=Q*2;
	c=-Q*2;
}
else{
	X=0;
	c=0;
}
P=O;
	break;
}
if(b==="fade"){
	if(B.crossfade){
	J.children(":eq("+O+")",V).css({
	zIndex:10}
).fadeIn(B.fadeSpeed,B.fadeEasing,function(){
	if(B.autoHeight){
	J.animate({
	height:J.children(":eq("+O+")",V).outerHeight()}
,B.autoHeightSpeed,function(){
	J.children(":eq("+N+")",V).css({
	display:"none",zIndex:0}
);
	J.children(":eq("+O+")",V).css({
	zIndex:0}
);
	B.animationComplete(O+1);
	H=false;
}
);
}
else{
	J.children(":eq("+N+")",V).css({
	display:"none",zIndex:0}
);
	J.children(":eq("+O+")",V).css({
	zIndex:0}
);
	B.animationComplete(O+1);
	H=false;
}
}
);
}
else{
	J.children(":eq("+N+")",V).fadeOut(B.fadeSpeed,B.fadeEasing,function(){
	if(B.autoHeight){
	J.animate({
	height:J.children(":eq("+O+")",V).outerHeight()}
,B.autoHeightSpeed,function(){
	J.children(":eq("+O+")",V).fadeIn(B.fadeSpeed,B.fadeEasing);
}
);
}
else{
	J.children(":eq("+O+")",V).fadeIn(B.fadeSpeed,B.fadeEasing,function(){
	if(A.browser.msie){
	A(this).get(0).style.removeAttribute("filter");
}
}
);
}
B.animationComplete(O+1);
	H=false;
}
);
}
}
else{
	J.children(":eq("+O+")").css({
	left:X,display:"block"}
);
	if(B.autoHeight){
	J.animate({
	left:c,height:J.children(":eq("+O+")").outerHeight()}
,B.slideSpeed,B.slideEasing,function(){
	J.css({
	left:-Q}
);
	J.children(":eq("+O+")").css({
	left:Q,zIndex:5}
);
	J.children(":eq("+N+")").css({
	left:Q,display:"none",zIndex:0}
);
	B.animationComplete(O+1);
	H=false;
}
);
}
else{
	J.animate({
	left:c}
,B.slideSpeed,B.slideEasing,function(){
	J.css({
	left:-Q}
);
	J.children(":eq("+O+")").css({
	left:Q,zIndex:5}
);
	J.children(":eq("+N+")").css({
	left:Q,display:"none",zIndex:0}
);
	B.animationComplete(O+1);
	H=false;
}
);
}
}
if(B.pagination){
	A("."+B.paginationClass+" li."+B.currentClass,V).removeClass(B.currentClass);
	A("."+B.paginationClass+" li:eq("+O+")",V).addClass(B.currentClass);
}
}
}
function R(){
	clearInterval(V.data("interval"));
}
function G(){
	if(B.pause){
	clearTimeout(V.data("pause"));
	clearInterval(V.data("interval"));
	K=setTimeout(function(){
	clearTimeout(V.data("pause"));
	F=setInterval(function(){
	E("next",L);
}
,B.play);
	V.data("interval",F);
}
,B.pause);
	V.data("pause",K);
}
else{
	R();
}
}
if(Z<2){
	return;
}
if(D<0){
	D=0;
}
if(D>Z){
	D=Z-1;
}
if(B.start){
	P=D;
}
if(B.randomize){
	J.randomize();
}
A("."+B.container,V).css({
	overflow:"hidden",position:"relative"}
);
	J.children().css({
	position:"absolute",top:0,left:J.children().outerWidth(),zIndex:0,display:"none"}
);
	J.css({
	position:"relative",width:(Q*3),height:M,left:-Q}
);
	A("."+B.container,V).css({
	display:"block"}
);
	if(B.autoHeight){
	J.children().css({
	height:"auto"}
);
	J.animate({
	height:J.children(":eq("+D+")").outerHeight()}
,B.autoHeightSpeed);
}
if(B.preload&&J.find("img:eq("+D+")").length){
	A("."+B.container,V).css({
	background:"url("+B.preloadImage+") no-repeat 50% 50%"}
);
	var Y=J.find("img:eq("+D+")").attr("src")+"?"+(new Date()).getTime();
	if(A("img",V).parent().attr("class")!="slides_control"){
	T=J.children(":eq(0)")[0].tagName.toLowerCase();
}
else{
	T=J.find("img:eq("+D+")");
}
J.find("img:eq("+D+")").attr("src",Y).load(function(){
	J.find(T+":eq("+D+")").fadeIn(B.fadeSpeed,B.fadeEasing,function(){
	A(this).css({
	zIndex:5}
);
	A("."+B.container,V).css({
	background:""}
);
	U=true;
	B.slidesLoaded();
}
);
}
);
}
else{
	J.children(":eq("+D+")").fadeIn(B.fadeSpeed,B.fadeEasing,function(){
	U=true;
	B.slidesLoaded();
}
);
}
if(B.bigTarget){
	J.children().css({
	cursor:"pointer"}
);
	J.children().click(function(){
	E("next",L);
	return false;
}
);
}
if(B.hoverPause&&B.play){
	J.bind("mouseover",function(){
	R();
}
);
	J.bind("mouseleave",function(){
	G();
}
);
}
if(B.generateNextPrev){
	A("."+B.container,V).after('<a href="#" class="'+B.prev+'">Prev</a>');
	A("."+B.prev,V).after('<a href="#" class="'+B.next+'">Next</a>');
}
A("."+B.next,V).click(function(a){
	a.preventDefault();
	if(B.play){
	G();
}
E("next",L);
}
);
	A("."+B.prev,V).click(function(a){
	a.preventDefault();
	if(B.play){
	G();
}
E("prev",L);
}
);
	if(B.generatePagination){
	if(B.prependPagination){
	V.prepend("<ul class="+B.paginationClass+"></ul>");
}
else{
	V.append("<ul class="+B.paginationClass+"></ul>");
}
J.children().each(function(){
	A("."+B.paginationClass,V).append('<li><a href="#'+C+'">'+(C+1)+"</a></li>");
	C++;
}
);
}
else{
	A("."+B.paginationClass+" li a",V).each(function(){
	A(this).attr("href","#"+C);
	C++;
}
);
}
A("."+B.paginationClass+" li:eq("+D+")",V).addClass(B.currentClass);
	A("."+B.paginationClass+" li a",V).click(function(){
	if(B.play){
	G();
}
I=A(this).attr("href").match("[^#/]+$");
	if(P!=I){
	E("pagination",S,I);
}
return false;
}
);
	A("a.link",V).click(function(){
	if(B.play){
	G();
}
I=A(this).attr("href").match("[^#/]+$")-1;
	if(P!=I){
	E("pagination",S,I);
}
return false;
}
);
	if(B.play){
	F=setInterval(function(){
	E("next",L);
}
,B.play);
	V.data("interval",F);
}
}
);
}
;
	A.fn.slides.option={
	preload:false,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:false,next:"next",prev:"prev",pagination:true,generatePagination:true,prependPagination:false,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:false,randomize:false,play:0,pause:0,hoverPause:false,autoHeight:false,autoHeightSpeed:350,bigTarget:false,animationStart:function(){
}
,animationComplete:function(){
}
,slidesLoaded:function(){
}
}
;
	A.fn.randomize=function(C){
	function B(){
	return(Math.round(Math.random())-0.5);
}
return(A(this).each(function(){
	var F=A(this);
	var E=F.children();
	var D=E.length;
	if(D>1){
	E.hide();
	var G=[];
	for(i=0;
	i<D;
	i++){
	G[G.length]=i;
}
G=G.sort(B);
	A.each(G,function(I,H){
	var K=E.eq(H);
	var J=K.clone(true);
	J.show().appendTo(F);
	if(C!==undefined){
	C(K,J);
}
K.remove();
}
);
}
}
));
}
;
}
)(jQuery);

CSS代码(global.css):

/*Resets defualt browser settingsreset.css*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
a:active{outline:none;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
/*Page style*/
body{font:normal 62.5%/1.5 Helvetica,Arial,sans-serif;letter-spacing:0;color:#434343;background:#efefef url(../img/background.png) repeat top center;padding:20px 0;position:relative;text-shadow:0 1px 0 rgba(255,255,255,.8);-webkit-font-smoothing:subpixel-antialiased;}
#container{width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;}
#example{width:600px;height:350px;position:relative;}
#ribbon{position:absolute;top:-3px;left:-15px;z-index:500;}
#frame{position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}
/*Slideshow*/
#slides{position:absolute;top:15px;left:4px;z-index:100;}
/*Slides containerImportant:Set the width of your slides containerSet to display none,prevents content flash*/
.slides_container{width:570px;overflow:hidden;position:relative;display:none;}
/*Each slideImportant:Set the width of your slidesIf height not specified height will be set by the slide contentSet to display block*/
.slides_container div.slide{width:570px;height:270px;display:block;}
/*Next/prev buttons*/
#slides .next,#slides .prev{position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}
#slides .next{left:585px;}
/*Pagination*/
.pagination{margin:26px auto 0;width:100px;}
.pagination li{float:left;margin:0 1px;list-style:none;}
.pagination li a{display:block;width:12px;height:0;padding-top:12px;background-image:url(../img/pagination.png);background-position:0 0;float:left;overflow:hidden;}
.pagination li.current a{background-position:0 -12px;}
/*Caption*/
.caption{z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 20px 0 20px;background:#000;background:rgba(0,0,0,.5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid #000;text-shadow:none;}
/*Footer*/
#footer{text-align:center;width:580px;margin-top:9px;padding:4.5px 0 18px;border-top:1px solid #dfdfdf;}
#footer p{margin:4.5px 0;font-size:1.0em;}
/*Anchors*/
a:link,a:visited{color:#599100;text-decoration:none;}
a:hover,a:active{color:#599100;text-decoration:underline;}

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