西山居首页jQuery焦点图代码轮播滚动切换特效

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

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

以下是西山居首页jQuery焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>西山居首页jQuery焦点图代码</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js" ></script>
<script src="js/jquery.easing.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		var kv_num = 0;
		function nextKv(){
			$(".control").attr("style","pointer-events:none");
			kv_num++;
			if(kv_num==4){kv_num=0;}
			$(".kv_pic").animate({ left:-1000*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){
				$(".control").attr("style","pointer-events:auto");
			}}); 
			$(".kv_word>ul").stop().animate({ left:-340*kv_num},{ easing: 'easeInOutQuad', duration: 800, complete: function(){}}); 
			$(".kv_dot ul li").removeClass("action").eq(kv_num).addClass("action");
		}
		function prevKv(){
			$(".control").attr("style","pointer-events:none");
			kv_num--;
			if(kv_num==-1){kv_num=3;}
			$(".kv_pic").animate({ left:-1000*kv_num},{ easing: 'easeInOutQuad', duration: 500, complete: function(){
				
				$(".control").attr("style","pointer-events:auto");
			}}); 
			$(".kv_word>ul").stop().animate({ left:-340*kv_num},{ easing: 'easeInOutQuad', duration: 800, complete: function(){}}); 
		}
		$(".control .next").on("click",nextKv);
		$(".control .prev").on("click",prevKv);
		// 自动轮播
		setInterval(nextKv,3500);
		
		var top = $(".footer").offset().top;
		if((top+80)<=$(window).height()){
			$(".footer").attr("style","position:fixed; bottom:0;");
		}
	});	
</script>

</head>
<body>
<div style="height:10px;width:100%;"></div>
<div class="main">
	<div class="kv">
		<ul class="kv_pic">
			<li><img src="images/index_kv1.jpg" alt="" /></li>
			<li><img src="images/index_kv2.jpg" alt="" /></li>
			<li><img src="images/index_kv3.jpg" alt="" /></li>
			<li><img src="images/index_kv4.jpg" alt="" /></li>
		</ul>
		<div class="kv_word">
			<ul>
				<li>
					<h3 class="tit1">家属开放日</h3>
					<h3 class="tit2">感谢有你 一路同行</h3>
					<p>为感谢家人们对居士们的默默支持与理解，西山居会在每一年邀请家属们参加一年一度的家属开放日，感受西山居的环境文化和办公氛围。</p>
				</li>
				<li>
					<h3 class="tit1">2014神觅会</h3>
					<h3 class="tit2">玩转创意 游戏穿越</h3>
					<p>是否幻想过把游戏场景搬到现实生活中？是否憧憬过穿越进游戏里当一回英雄侠士驰骋江湖？西山居士玩转创意，将梦想中的世界在你我身边呈现。我们在办公中游戏，在游戏中办公！！</p>
				</li>
				<li>
					<h3 class="tit1">西山居俱乐部</h3>
					<h3 class="tit2">Hello，西山居俱乐部！</h3>
					<p>在这里，我们为你寻找志同道合的朋友；在这里，我们为你丰富枯燥的业余生活。摄影、羽毛球、乒乓球、足球、游泳、篮球……准备好加入我们了吗？</p>
				</li>
				<li>
					<h3 class="tit1">2015西山居年会</h3>
					<h3 class="tit2">纵情聚·变  同享盛事</h3>
					<p>每一年总有一晚，我们把酒言欢，共叙期许；每一年总有一刻，我们拥抱佳绩，共聚一堂。这是一个大家庭，这是一个大江湖，各路英雄豪杰共进西山居年夜饭，满载而归结束一年的辛劳。</p>
				</li>
			</ul>
		</div>
		<div class="control">
			<div class="prev"><img src="images/icons_move_left.jpg" alt="" /></div>
			<div class="next"><img src="images/icons_move_right.jpg" alt="" /></div>
		</div>
		<div class="kv_dot">
			<ul>
				<li class="action"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

JS代码(jquery.easing.js):

/* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright 漏 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. **/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
	jQuery.extend( jQuery.easing,{
	def:'easeOutQuad',swing:function (x,t,b,c,d){
	//alert(jQuery.easing.default);
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
	return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
	return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
	return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t + b;
	return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
	return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
	return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
	return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
	return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
	return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
	if (t==0) return b;
	if (t==d) return b+c;
	if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
	return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
	return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
	return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
	return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d/2)==2) return b+c;
	if (!p) p=d*(.3*1.5);
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
	return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
	if ((t/=d) < (1/2.75)){
	return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
	if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
	return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
	/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright 漏 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
	LOSS OF USE,DATA,OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */

CSS代码(style.css):

/* 公共样式表 */
/* css 初始化(必备) */
*{margin:0px;padding:0px;font-size:12px;}
.clearfix{margin:0px;padding:0px;border:0px;clear:both;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0px;padding:0px;}
body{background-color:#FFFFFF;font-family:Microsoft Yahei,Verdana,Arial;}
fieldset,img{border:0px;}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal;}
ol,ul,li{list-style:none outside none;/*outside凸排*/
}
h1,h2,h3,h4,h5,h6{font-size:100%;}
a:link,a:visited{text-decoration:none;}
ul,form{margin:0px;padding:0px;}
a{color:#777;}
body{background-color:#fff;margin:0px;font-family:Arial,Microsoft Yahei;}
a{color:#999;text-decoration:none;}
.main{width:1000px;margin:0 auto;height:720px;position:relative}
.kv{position:relative;width:1000px;height:480px;overflow:hidden;}
.kv_pic{width:5000px;height:380px;overflow:hidden;position:absolute;}
.kv_pic>li{width:1000px;height:380px;float:left;}
.kv_pic img{width:100%;}
.kv_word{width:340px;height:192px;background-color:#313131;position:absolute;top:280px;left:0;overflow:hidden;}
.kv_word .tit1{font-size:18px;color:#fff;margin-left:18px;margin-top:14px;}
.kv_word .tit2{font-size:18px;color:#f5df00;margin-left:18px;}
.kv_word li p{font-size:12px;color:#868686;width:252px;margin-left:18px;line-height:1.6;margin-top:10px;}
.kv_word ul{width:1700px;height:192px;position:absolute;}
.kv_word ul li{width:340px;height:192px;float:left;}
.kv .control{width:54px;height:26px;position:absolute;left:313px;top:354px;}
.kv .control div{width:26px;height:26px;background-color:#f5df00;margin-right:1px;float:left;cursor:pointer;}
.index_right{position:absolute;top:400px;right:0;width:300px;}
.index_right h3{font-size:18px;}
.index_right h3 span{font-size:12px;color:#969696;font-weight:normal;padding-left:8px;}
.index_right .sqe{padding:6px 6px 16px 32px;width:30px;color:#fff;font-size:14px;float:left;margin-top:22px;margin-bottom:16px;}
.index_right .sqw{float:right;width:208px;line-height:1.8;padding-bottom:15px;padding-top:10px;border-top:1px dotted #424242;color:#424242;margin-top:13px;}
.kv_dot{position:absolute;left:250px;top:440px;}
.kv_dot ul>li{width:10px;height:10px;background:url(../images/icons_dot1.png) no-repeat center;float:left;margin-right:5px;}
.kv_dot ul>li.action{background:url(../images/icons_dot2.png) no-repeat center;}
.lang{width:1000px;margin:15px auto;text-align:right;}
.lang a{padding:0 7px;}
.lang a.action{color:#000;}

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