经验分享程序开发文档资料数据资源其它资源

幻灯片图片切换效果特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 幻灯片图片切换效果特效代码 的示例演示效果:

当前平台(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代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为幻灯片图片切换效果，属于站长常用代码" />
<title>幻灯片图片切换效果</title>
<link rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>
<script type=text/javascript src="js/jquery-1.3.2.min.js"></script>
<script type=text/javascript src="js/jquery.easing.1.2.js"></script>
<script type=text/javascript>
	// <![CDATA[
		$(document).ready(function(){
		
			if ($('#pager a').size() <= 1) {
				$('#pager').css('display', 'none');
				return;
			}
		
			var index = 0;
			var selected = null;
			var width = 756;
			
			$('#pager a').each(function(i){
				if (i == 0) {
					selected = $(this);
					selected.find('img').attr('src', 'images/button-view-active.gif');
				}
				$(this).click(function(){
					index = i;
					selected.find('img').attr('src', 'images/button-view.gif');
					selected = $(this);
					selected.find('img').attr('src', 'images/button-view-active.gif');
					$('#images').animate({left:-(width * i)}, 500, 'easeOutQuad');
					return false;
				});
			});
			
			$('#images').wrapInner('<a href="#" id="next"></a>');
			$('#next').click(function(){
				var a = $('#pager a').get(index + 1);
				if (!a) a = $('#pager a').get(0);
				$(a).click();
				return false;
			});
		});
	// ]]>
	</script>
</head>

<body style="text-align:center" class=work-project>
<div>
<div id=content>
<div id=project><!-- project navigation -->
<p id=navigation><span id=pager>
<a href="images/1.jpg"><img alt=1 src="images/button-view.gif" width=12 height=19></a>
<a href="images/2.jpg"><img alt=2 src="images/button-view.gif" width=12 height=19></a>
<a href="images/3.jpg"><img alt=3 src="images/button-view.gif" width=12 height=19></a>
<a href="images/4.jpg"><img alt=4 src="images/button-view.gif" width=12 height=19></a>
<a href="images/5.jpg"><img alt=5 src="images/button-view.gif" width=12 height=19></a>
</span></p>
<!-- project images -->
<div id=mask>
<div id=images>
<img src="images/1.jpg" width=756 height=518><IMG src="images/2.jpg" width=756 height=518><IMG src="images/3.jpg" width=756 height=518><IMG src="images/4.jpg" width=756 height=518><IMG src="images/5.jpg" width=756 height=518></div></div><!-- project title -->
</div></div>
</div>
</body>
</html>

JS代码(jquery.easing.1.2.js):

/* * jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php * * Uses the built In easIng capabilities added In jQuery 1.1 * to offer multiple easIng options * * Copyright (c) 2007 George Smith * Licensed under the MIT License:* http://www.opensource.org/licenses/mit-license.php */
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.extend( jQuery.easing,{
	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;
}
}
);

CSS代码(lrtk.css):

#mask{WIDTH:756px;HEIGHT:518px}
#images{WIDTH:3780px}
*{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;PADDING-TOP:0px}
BODY{BACKGROUND-COLOR:#000;FONT-FAMILY:verdana,sans-serif;COLOR:#fff;FONT-SIZE:12px}
P{FONT-SIZE:12px;line-height:22px;}
A{OUTLINE-STYLE:none;COLOR:#fff;TEXT-DECORATION:none}
A:link{OUTLINE-STYLE:none;COLOR:#fff;TEXT-DECORATION:none}
A:visited{OUTLINE-STYLE:none;COLOR:#fff;TEXT-DECORATION:none}
A:active{OUTLINE-STYLE:none;COLOR:#fff;TEXT-DECORATION:none}
A:hover{OUTLINE-STYLE:none;COLOR:#fff;TEXT-DECORATION:none}
IMG{BORDER-BOTTOM-STYLE:none;BORDER-RIGHT-STYLE:none;BORDER-TOP-STYLE:none;BORDER-LEFT-STYLE:none}
SPAN.clear{DISPLAY:block;HEIGHT:0px;CLEAR:both;OVERFLOW:hidden}
BODY.work-thumbnails #content{PADDING-BOTTOM:100px;MARGIN:0px auto;WIDTH:780px}
BODY.work-thumbnails DIV.thumbnail{WIDTH:240px;DISPLAY:inline;MARGIN-BOTTOM:20px;FLOAT:left;MARGIN-LEFT:10px;MARGIN-RIGHT:10px}
BODY.work-thumbnails H2{TEXT-ALIGN:right;MARGIN-BOTTOM:20px;MARGIN-RIGHT:10px}
BODY.work-thumbnails DIV.thumbnail H3{TEXT-ALIGN:center;PADDING-BOTTOM:4px;TEXT-TRANSFORM:uppercase;BACKGROUND-COLOR:#fff;PADDING-LEFT:0px;PADDING-RIGHT:0px;COLOR:#000;FONT-SIZE:10px;PADDING-TOP:4px}
BODY.work-thumbnails DIV.thumbnail H4{MARGIN-BOTTOM:5px}
BODY.work-thumbnails DIV.thumbnail P{TEXT-ALIGN:center}
BODY.work-project #content{PADDING-BOTTOM:10px;MARGIN:0px auto;WIDTH:760px}
BODY.work-project #navigation{MARGIN-BOTTOM:10px}
BODY.work-project #mask{BORDER-BOTTOM:#fff 2px solid;POSITION:relative;BORDER-LEFT:#fff 2px solid;MARGIN-BOTTOM:10px;OVERFLOW:hidden;BORDER-TOP:#fff 2px solid;BORDER-RIGHT:#fff 2px solid}
BODY.work-project #images{POSITION:absolute;TOP:0px;LEFT:0px}
BODY.work-project #title{TEXT-TRANSFORM:uppercase;FLOAT:left;MARGIN-RIGHT:20px}
BODY.work-project #overview{TEXT-TRANSFORM:uppercase;FLOAT:left;COLOR:#999}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
608.51 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
608.51 KB
立即下载
龙艺月
了解
打赏作者 鼓励作者
Html JS 图片特效6
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章