布丁移动官网jQuery焦点图轮播滚动切换特效代码

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

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

以下是布丁移动官网jQuery焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(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">
<title>布丁移动官网jQuery焦点图</title>
<link href="styles/zzsc.css" rel="stylesheet" type="text/css" />
</head>

<body>
<br>

	<div id="focus">
		<div id="slides">
			<style type="text/css">
            ul.pagination{width:55px !important;}
        </style>
			<div class="slides_container">
				<a href="i_weiche.html" title="微车" rel="external">
				<img src="images/focus/weiche_banner.png" alt="微车" /></a>
				<a href="i_ticket.html" title="布丁电影票" rel="external">
				<img src="images/focus/ticket_banner.png" alt="布丁电影票" /></a>
				<a href="i_coupon.html" title="布丁优惠券" rel="external">
				<img src="images/focus/coupon.jpg" alt="布丁优惠券" /></a>
			</div>
		</div>
	</div>
	
<script src="scripts/jquery.min_v1.0.js" type="text/javascript"></script>
<script src="scripts/slides.min.jquery_v1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('#slides').slides({
		preload: true,
		preloadImage: 'images/loading.gif',
		play: 5000,
		pause: 2500,
		hoverPause: true,
		fadeSpeed: 350,
		effect: 'fade'
	});
});

</script>
</body>
</html>

JS代码(slides.min.jquery_v1.0.js):

/** Slides,A Slideshow Plugin for jQuery* Intructions:http://slidesjs.com* By:Nathan Searles,http://nathansearles.com* Version:1.1.9* Updated:September 5th,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){
	return b=a.extend({
}
,a.fn.slides.option,b),this.each(function(){
	function w(g,h,i){
	if(!p&&o){
	p=!0,b.animationStart(n+1);
	switch(g){
	case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k;
	break;
	case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;
	break;
	case"pagination":k=parseInt(i,10),l=a("."+b.paginationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}
h==="fade"?b.crossfade?d.children(":eq("+k+")",c).css({
	zIndex:10}
).fadeIn(b.fadeSpeed,b.fadeEasing,function(){
	b.autoHeight?d.animate({
	height:d.children(":eq("+k+")",c).outerHeight()}
,b.autoHeightSpeed,function(){
	d.children(":eq("+l+")",c).css({
	display:"none",zIndex:0}
),d.children(":eq("+k+")",c).css({
	zIndex:0}
),b.animationComplete(k+1),p=!1}
):(d.children(":eq("+l+")",c).css({
	display:"none",zIndex:0}
),d.children(":eq("+k+")",c).css({
	zIndex:0}
),b.animationComplete(k+1),p=!1)}
):d.children(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){
	b.autoHeight?d.animate({
	height:d.children(":eq("+k+")",c).outerHeight()}
,b.autoHeightSpeed,function(){
	d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing)}
):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){
	a.browser.msie&&a(this).get(0).style.removeAttribute("filter")}
),b.animationComplete(k+1),p=!1}
):(d.children(":eq("+k+")").css({
	left:r,display:"block"}
),b.autoHeight?d.animate({
	left:g,height:d.children(":eq("+k+")").outerHeight()}
,b.slideSpeed,b.slideEasing,function(){
	d.css({
	left:-f}
),d.children(":eq("+k+")").css({
	left:f,zIndex:5}
),d.children(":eq("+l+")").css({
	left:f,display:"none",zIndex:0}
),b.animationComplete(k+1),p=!1}
):d.animate({
	left:g}
,b.slideSpeed,b.slideEasing,function(){
	d.css({
	left:-f}
),d.children(":eq("+k+")").css({
	left:f,zIndex:5}
),d.children(":eq("+l+")").css({
	left:f,display:"none",zIndex:0}
),b.animationComplete(k+1),p=!1}
)),b.pagination&&(a("."+b.paginationClass+" li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+" li:eq("+k+")",c).addClass(b.currentClass))}
}
function x(){
	clearInterval(c.data("interval"))}
function y(){
	b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){
	clearTimeout(c.data("pause")),v=setInterval(function(){
	w("next",i)}
,b.play),c.data("interval",v)}
,b.pause),c.data("pause",u)):x()}
a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');
	var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h=b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace(" ","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace(" ","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;
	if(e<2)return a("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){
	o=!0,b.slidesLoaded()}
),a("."+b.next+",."+b.prev).fadeOut(0),!1;
	if(e<2)return;
	h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a("."+b.container,c).css({
	overflow:"hidden",position:"relative"}
),d.children().css({
	position:"absolute",top:0,left:d.children().outerWidth(),zIndex:0,display:"none"}
),d.css({
	position:"relative",width:f*3,height:g,left:-f}
),a("."+b.container,c).css({
	display:"block"}
),b.autoHeight&&(d.children().css({
	height:"auto"}
),d.animate({
	height:d.children(":eq("+h+")").outerHeight()}
,b.autoHeightSpeed));
	if(b.preload&&d.find("img:eq("+h+")").length){
	a("."+b.container,c).css({
	background:"url("+b.preloadImage+") no-repeat 50% 50%"}
);
	var z=d.find("img:eq("+h+")").attr("src")+"?"+(new Date).getTime();
	a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCase():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){
	d.find(t+":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){
	a(this).css({
	zIndex:5}
),a("."+b.container,c).css({
	background:""}
),o=!0,b.slidesLoaded()}
)}
)}
else d.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){
	o=!0,b.slidesLoaded()}
);
	b.bigTarget&&(d.children().css({
	cursor:"pointer"}
),d.children().click(function(){
	return w("next",i),!1}
)),b.hoverPause&&b.play&&(d.bind("mouseover",function(){
	x()}
),d.bind("mouseleave",function(){
	y()}
)),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){
	a.preventDefault(),b.play&&y(),w("next",i)}
),a("."+b.prev,c).click(function(a){
	a.preventDefault(),b.play&&y(),w("prev",i)}
),b.generatePagination?(b.prependPagination?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){
	a("."+b.paginationClass,c).append('<li><a href="#'+m+'">'+(m+1)+"</a></li>"),m++}
)):a("."+b.paginationClass+" li a",c).each(function(){
	a(this).attr("href","#"+m),m++}
),a("."+b.paginationClass+" li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){
	return b.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}
),a("a.link",c).click(function(){
	return b.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}
),b.play&&(v=setInterval(function(){
	w("next",i)}
,b.play),c.data("interval",v))}
)}
,a.fn.slides.option={
	preload:!1,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,prependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,autoHeightSpeed:350,bigTarget:!1,animationStart:function(){
}
,animationComplete:function(){
}
,slidesLoaded:function(){
}
}
,a.fn.randomize=function(b){
	function c(){
	return Math.round(Math.random())-.5}
return a(this).each(function(){
	var d=a(this),e=d.children(),f=e.length;
	if(f>1){
	e.hide();
	var g=[];
	for(i=0;
	i<f;
	i++)g[g.length]=i;
	g=g.sort(c),a.each(g,function(a,c){
	var f=e.eq(c),g=f.clone(!0);
	g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()}
)}
}
)}
}
)(jQuery)

CSS代码(zzsc.css):

@charset "utf-8";/*通用样式*/
html,body,div,img,ul,ol,li,dl,dt,dd,a,span,h1,h2,h3,h4,h5,h6,p,span{margin:0;padding:0;}
*html{background-image:url(about:blank);background-attachment:fixed;}
body{background:url(../images/body_bg.jpg);font:14px "微软雅黑","宋体","黑体";}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
img{border:0 none!important;}
ul,li{list-style:none;}
#wrap{background:url(../images/wrap_bg.jpg);border-bottom:1px solid #c3c3c3;box-shadow:0 3px 20px #d2d2d2;position:relative;width:100%;display:table;}
/*焦点图切换*/
#focus{width:1000px;height:466px;margin:0 auto;background:url(../images/loading.png) no-repeat 48% 37%;}
#slides{position:absolute;z-index:1;}
.slides_container{width:1000px;overflow:hidden;position:relative;display:none;}
.slides_container a{width:1000px;height:466px;display:block;}
.pagination{position:absolute;bottom:-8px;z-index:999;padding:0 10px;padding-top:3px;margin-left:47%;background:rgba(255,255,255,0.5);box-shadow:0 0 10px #ccc inset;border-radius:10px;width:72px;height:14px;}
.pagination li{float:left;margin:0 4px;}
.pagination li a{display:block;width:10px;height:0;padding-top:10px;background:url(../images/pagination_1.png) 0 0;float:left;overflow:hidden;}
.pagination li.current a{background-position:0 -10px;_background-position:0 -9px;}
/*内容*/
#column_ab_a{width:100%;overflow:hidden;float:left;padding:60px 30px 20px;}
#column_ab_b{width:300px;overflow:hidden;float:right;}
/*#column_ab_a*/
#column_ab_a div{width:250px;float:left;overflow:hidden;color:#a1a1a1;margin:0 30px;display:inline;}
#column_ab_a div h2{font-size:16px;color:#4d4d4d;padding-left:50px;height:40px;}
#column_ab_a div#coupon h2{background:url(../images/coupon_h2.jpg) no-repeat left center;}
#column_ab_a div#ticket h2{background:url(../images/ticket_h2.jpg) no-repeat left center;}
#column_ab_a div h2 span{font-size:14px;font-weight:normal;color:#a1a1a1;display:block;background:none;}
#column_ab_a div p{font-size:14px;margin-top:20px;margin-bottom:20px;line-height:24px;text-indent:2em;}
#column_ab_a div p a{color:#ee4017;background:url(../images/more.png) no-repeat right center;padding-right:10px;margin-left:10px;}
#column_ab_a div p a:hover{text-decoration:underline;}
#column_ab_a div h3,#column_ab_a div h4{text-align:right;}
#column_ab_a div h3{margin-top:5px;}
/*#column_ab_b*/
#column_ab_b div{width:219px;overflow:hidden;color:#a1a1a1;border-left:1px solid #cecece;margin-top:60px;padding:0 40px;}
#column_ab_b div h2{font-size:16px;color:#4d4d4d;background:url(../images/system_h2.jpg) no-repeat left center;padding-left:50px;height:40px;}
#column_ab_b div h2 span{font-size:14px;font-weight:normal;color:#a1a1a1;display:block;background:none;}
#column_ab_b div dl{margin-top:20px;line-height:24px;}
#column_ab_b div dt{color:#4d4d4d;font-weight:bold;background:url(../images/dot1.png) no-repeat left center;padding-left:15px;}
#column_ab_b div dd{padding-left:15px;margin-bottom:10px;}
#column_ab_b div a{display:block;width:161px;height:44px;background:url(../images/tosystem.jpg);text-indent:-9999px;margin:20px auto;}
#sbuding{display:block;width:161px;height:44px;background:url(../images/tosystem.jpg);text-indent:-9999px;margin-left:60px;}

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