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

jquery医院网站banner切换特效代码

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

以下是 jquery医院网站banner切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery医院网站banner切换特效代码

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医院网站banner切换特效 </title>
    <script type="text/javascript" src="js/jquery-1.js"></script>
    <script type="text/javascript" src="js/banner.js"></script>
</head>
<body>
<link rel="stylesheet" href="css/index.css" type="text/css">
<div class="servicesPop">
	<div id="serFocus">
		<div class="fr" style="position:relative;"><a href="javascript:void(0)" class="close2" onclick="closeSerPop()">&nbsp;</a></div>
		<div id="flash1">
			<div class="yidongL" style="width:305px"><img src="images/img3.gif" width="304" height="227" /></div>
			<div class="servicesTxt" style="float:left">
				<div class="serTit"><a href="#" class="black">项目优势</a></div>
				<p>在我国大、中城市居民诸多死亡原因中，癌症位居第一。对中老
				年人来说，癌症已成为多发病、常见病。据目前的医疗水平，对早期癌症病人的
				治疗约有90%以上可以治愈，但是中晚期的癌症病人，在治疗后能生存5 年以上
				的人，则不到10%。因此癌症早发现为早期治疗赢得宝贵时间，显得尤为重要...</p>
				<div class="cl">
					<a href="#" target="_blank" class="yidongBt white">政策支持</a>&nbsp;&nbsp;
					<a href="#" target="_blank" class="yidongBt white">社会背景</a>&nbsp;&nbsp;
					<a href="#" target="_blank" class="yidongBt white">市场需求</a>
				</div>
			</div>
		</div>
	
		<div id="flash2">
			<div class="yidongL"><img src="images/img3.gif" width="304" height="227" /></div>
			<div class="servicesTxt" style="padding-right:40px;">
				<div class="serTit" style="padding-top:15px;"><a href="#" class="black">肿瘤早知道</a></div>
				<ul class="jiance">
					<li><span class="cenum"></span><a href="#">检测意义</a></li>
					<li><span class="cenum1"></span><a href="#">检测意义</a></li>
					<li><span class="cenum2"></span><a href="#">检测意义</a></li>
				</ul>
				<ul class="cely">
					<li><a href="#">今天是五四青年节，很高兴来到北京大学同大家见面</a></li>
					<li><a href="#">今天是五四青年节，很高兴来到北京大学同大家见面</a></li>
				</ul>
				<div class="cl"><a href="#" class="yidongBt white" target="_blank">技术优势</a>&nbsp;&nbsp;<a href="#" class="yidongBt white" target="_blank">市场优势</a>&nbsp;&nbsp;<a href="#" class="yidongBt white" target="_blank">价格优势</a>&nbsp;&nbsp;<a href="#" class="yidongBt white" target="_blank">价格优势</a>
				</div>
			</div>
		</div>
	
		<div id="flash3">
			<div class="servicesCon">
				<div class="serTit"><a href="#" class="black">项目优势</a></div>
				<div class="cl">新华网北京5月4日电(记者徐京跃、霍小光)在五四青年节这个属于青的节日，中共中央总书记、国家主席、中央军委主席习近平来到北京大学考察。习近平代表党中央，向全国各族青年致以节日问候，向全国广大教育工作者和青年工作者致以崇高敬意。他强调，核心价值观承载着一个民族作者致以崇高敬意。他强调，核心价值观承载着一个民族</div>
				<div class="cl">
					<a href="#" class="yidongBt white" target="_blank">采样流程</a>
					<a href="#" class="yidongBt white" target="_blank">检测报告</a>
					<a href="#" class="yidongBt white" target="_blank">结果解读</a>
					<a href="#" class="yidongBt white" target="_blank">检测流程</a>
				</div>
			</div>
			<div class="yidongL1"><img src="images/img3.gif" width="304" height="227" /></div>
		</div>
		
		<div class="flash_bar">
			<span class="no" id="f1" onclick="changeflash(1)"></span>
			<span class="no" id="f2" onclick="changeflash(2)"></span>
			<span class="no" id="f3" onclick="changeflash(3)"></span>
		</div>
	</div>
</div>


<div class="mainv">

	<div class="banner" id="banner">
		<a href="#" class="d1" style="background:url(images/1.jpg) center no-repeat;"></a>
		<a href="#" class="d1" style="background:url(images/2.jpg) center no-repeat;"></a>
		<a href="#" class="d1" style="background:url(images/3.jpg) center no-repeat;"></a>
		<div class="d2" id="banner_id">
			<table cellspacing="0" cellpadding="0">
				<tr>
					<td><div>1</div></td>
					<td><div>2</div></td>
					<td><div>3</div></td>
				</tr>
			</table>
		</div>
	</div>
	
	<script type="text/javascript">banner()</script>


	<div id="servicesBox">
		<div id="serBox1" class="serBox" onclick="serFocus(1)">
			<div class="serBoxOn"></div>
			<div class="pic1 mypng"><img src="images/ser_box2b.png" /></div>
			<div class="pic2 mypng"><img src="images/ser_box2.png" /></div>
			<div class="txt1"><span class="tit">项目背景</span>关于p53(抑癌）基因检测项目市场需求、社会背景、政策支持等相关解释说明.</div>
			<div class="txt2"><span class="tit">项目背景</span>关于p53(抑癌）基因检测项目市场需求、社会背景、政策支持等相关解释说明.</div>
		</div>
	
		<div id="serBox2" class="serBox" onclick="serFocus(2)">
			<div class="serBoxOn"></div>
			<div class="pic1 mypng"><img src="images/ser_box3.png" /></div>
			<div class="pic2 mypng"><img src="images/ser_box3b.png" /></div>
			<div class="txt1"><span class="tit">项目优势</span>关于p53(抑癌）基因检测项目技术、价格、市场等优势的进一步介绍说明.</div>
			<div class="txt2"><span class="tit">项目优势</span>关于p53(抑癌）基因检测项目技术、价格、市场等优势的进一步介绍说明.</div>
		</div>

		<div id="serBox3" class="serBox" onclick="serFocus(3)" style="margin-right:0px;">
			<div class="serBoxOn"></div>
			<div class="pic1 mypng"><img src="images/ser_box1.png" /></div>
			<div class="pic2 mypng"><img src="images/ser_box1b.png" /></div>
			<div class="txt1"><span class="tit">P53(抑癌）基因检测</span>什么是p53基因？p53基因检测适用人群、检测范围，采样流程等相关介绍说明.</div>
			<div class="txt2"><span class="tit">P53(抑癌）基因检测</span>什么是p53基因？p53基因检测适用人群、检测范围，采样流程等相关介绍说明.</div>
		</div>
	</div>
	
</div>

<script type="text/javascript">
$(document).ready(function(){

	$(".serBox").hover(function(){
		$(this).children().stop(false,true);
		$(this).children(".serBoxOn").fadeIn("slow");
		$(this).children(".pic1").animate({right: -110},400);
		$(this).children(".pic2").animate({left: 43},400);
		$(this).children(".txt1").animate({left: -176},400);
		$(this).children(".txt2").animate({right: 10},400);	 
	},function(){
		$(this).children().stop(false,true);

		$(this).children(".serBoxOn").fadeOut("slow");
		$(this).children(".pic1").animate({right:43},400);
		$(this).children(".pic2").animate({left: -110},400);
		$(this).children(".txt1").animate({left: 10},400);
		$(this).children(".txt2").animate({right: -176},400);	
	});
	
});	
	
function serFocus(i){
	$(".servicesPop").slideDown("normal");
	changeflash(i);
}
function closeSerPop(){
	$(".servicesPop").slideUp("fast");
}

var currentindex=1;
function changeflash(i){	
	currentindex=i;
	for (j=1;j<=6;j++){
		if(j==i){
			$("#flash"+j).fadeIn("normal");
			$("#flash"+j).css("display","block");
			$("#f"+j).removeClass();
			$("#f"+j).addClass("dq");
		}else{
			$("#flash"+j).css("display","none");
			$("#f"+j).removeClass();
			$("#f"+j).addClass("no");
		}
	}
}
</script>
</body>
</html>

JS代码(banner.js):

// JavaScript Documentfunction banner(){
	var bn_id = 0;
	var bn_id2= 1;
	var speed33=5000;
	var qhjg = 1;
	var MyMar33;
	$("#banner .d1").hide();
	$("#banner .d1").eq(0).fadeIn("slow");
	if($("#banner .d1").length>1){
	$("#banner_id div").eq(0).addClass("nuw");
	function Marquee33(){
	bn_id2 = bn_id+1;
	if(bn_id2>$("#banner .d1").length-1){
	bn_id2 = 0;
}
$("#banner .d1").eq(bn_id).css("z-index","2");
	$("#banner .d1").eq(bn_id2).css("z-index","1");
	$("#banner .d1").eq(bn_id2).show();
	$("#banner .d1").eq(bn_id).fadeOut("slow");
	$("#banner_id div").removeClass("nuw");
	$("#banner_id div").eq(bn_id2).addClass("nuw");
	bn_id=bn_id2;
}
;
	MyMar33=setInterval(Marquee33,speed33);
	$("#banner_id div").click(function(){
	var bn_id3 = $("#banner_id div").index(this);
	if(bn_id3!=bn_id&&qhjg==1){
	qhjg = 0;
	$("#banner .d1").eq(bn_id).css("z-index","2");
	$("#banner .d1").eq(bn_id3).css("z-index","1");
	$("#banner .d1").eq(bn_id3).show();
	$("#banner .d1").eq(bn_id).fadeOut("slow",function(){
	qhjg = 1;
}
);
	$("#banner_id div").removeClass("nuw");
	$("#banner_id div").eq(bn_id3).addClass("nuw");
	bn_id=bn_id3;
}
}
)$("#banner_id").hover(function(){
	clearInterval(MyMar33);
}
,function(){
	MyMar33=setInterval(Marquee33,speed33);
}
)}
else{
	$("#banner_id").hide();
}
}

CSS代码(index.css):

@charset "utf-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,buttonform,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
/* 酌情修改 */
body{font-size:12px;font-family:"新宋体","Hiragino Sans GB","Microsoft YaHei",tahoma,arial,simsun,"宋体";color:#656565;}
/* 短引用的内容可取值：''或"" */
q:before,q:after{content:”;}
/* 缩写，图片等无边框 */
a{cursor:pointer;}
fieldset,img,abbr,acronym{border:0 none;}
abbr,acronym{font-variant:normal;}
hr,legend,caption{display:none;}
/* 清除特殊标记的字体和字号 */
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
/* 上下标 */
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
/* 表格标题及内容居左显示 */
caption{text-align:left;}
input,img,select{vertical-align:middle;}
/* 清除列表样式 */
ol,ul{list-style:none;}
/* 输入控件字体 */
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
/* 标题元素样式清除 */
h1,h2,h3,h4,h5,h6{font-weight:bold;normal;font-size:100%;}
dt{font-weight:bold;}
em{font-style:normal;}
/* 链接样式，颜色可酌情修改 */
del,ins,a{color:#606060;text-decoration:none;}
a:hover,a:active,a:focus{text-decoration:none;color:#F60;}
/* 鼠标样式 */
input[type="submit"]{cursor:pointer;}
button{cursor:pointer;}
input::-moz-focus-inner{border:0;padding:0;}
.fr{float:right;}
.mainv{width:660px;position:relative;margin:40px auto;}
/*------ servicesBox ------*/
#servicesBox{width:655px;height:180px;float:left;clear:both;line-height:18px;color:#999999;font-size:12px;padding:15px 0px 15px 0px;}
#servicesBox h3{font-weight:normal;font-size:16px;height:30px;line-height:20px;color:#000000;}
#servicesBox .serBox{cursor:pointer;display:inline;width:205px;height:180px;float:left;overflow:hidden;background-color:#f7f7f7;position:relative;padding:0;box-shadow:0 1px 3px rgba(34,25,25,0.4);-moz-box-shadow:0 1px 3px rgba(34,25,25,0.4);-webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4);border:1px solid #d2d2d2;margin-right:17px;}
#servicesBox .serBoxOn{display:none;width:205px;height:180px;background:#916c24;position:absolute;left:0px;top:0px;z-index:19;}
#servicesBox .serBox .pic1{width:110px;height:60px;text-align:center;position:absolute;top:10px;right:43px;z-index:99;}
#servicesBox .serBox .pic2{width:110px;height:60px;text-align:center;position:absolute;top:10px;left:-110px;z-index:99;}
#servicesBox .serBox .txt1{width:176px;height:100px;color:#999999;position:absolute;top:65px;left:10px;z-index:99;}
#servicesBox .serBox .txt2{width:176px;height:100px;color:#E6E6E6;position:absolute;top:65px;right:-210px;z-index:99;}
#servicesBox .serBox span.tit{font-size:16px;display:block;height:40px;line-height:30px;text-align:center;}
#servicesBox .serBox .txt1 .tit{color:#000000;}
#servicesBox .serBox .txt2 .tit{color:#fff}
/* servicesPop */
.servicesPop{background:#F4F4F4;width:990px;clear:both;height:320px;position:absolute;top:100px;left:10%;z-index:9999;display:none;}
.servicesPop #serFocus{width:980px;height:273px;margin:10px auto auto auto;clear:both;background:#ffffff;}
#serFocus .white{color:#fff}
#serFocus div.box{height:273px;display:none;color:#999999;}
#serFocus div.box .serTit{height:30px;line-height:20px;width:540px;}
.flash_bar{text-align:center;clear:both;height:32px;width:1000px;padding-top:10px;margin:0 auto;}
.flash_bar span.dq{display:inline-block;width:20px;height:20px;cursor:pointer;background:#9a7528;border-radius:20px;margin-left:5px;}
.flash_bar span.no{display:inline-block;width:16px;height:16px;cursor:pointer;background:#ffffff;border-radius:20px;border:2px solid #9a7528;margin-left:5px;}
a.close2{cursor:pointer;display:inline-block;width:28px;height:28px;background:url(../images/bt_bg.gif) center no-repeat;position:absolute;top:0px;z-index:99;right:0px;}
a.close2:hover{background:url(../images/bt_bg.gif) center no-repeat;}
a.yidongBt{display:inline-block;margin-top:5px;width:125px;height:32px;line-height:32px;text-align:center;font-size:14px;background:url(../images/img4.gif) center no-repeat;}
.yidongL{width:290px;height:253px;text-align:right;float:left;overflow:hidden;padding:20px 0px 0px 15px;}
.servicesCon{float:left;padding:40px 0px 0px 50px;line-height:24px;}
.servicesTxt{float:left;width:460px;padding:55px 0px 0px 50px;line-height:22px;}
.servicesTxt p{padding:5px 0px 0px 0px;}
.yidongL1{width:290px;height:253px;text-align:right;float:right;overflow:hidden;padding:20px 60px 0px 15px;}
.cl{width:540px;}
.jiance{width:700px;float:left;}
.jiance li{float:left;line-height:32px;width:199px;}
.cenum{background:url(../images/num.gif) center left no-repeat;width:32px;height:32px;float:left;padding-right:20px;}
.cenum1{background:url(../images/num1.gif) center left no-repeat;width:32px;height:32px;float:left;padding-right:20px;}
.cenum2{background:url(../images/num3.gif) center left no-repeat;width:32px;height:32px;float:left;padding-right:20px;}
.cely{width:540px;float:left;padding:10px 0px 10px 0px;}
.cely li{background:url(../images/img17.gif) center left no-repeat;display:block;padding-left:20px;}
/* banner */
.banner{width:655px;float:left;overflow:hidden;height:330px;position:relative;border:1px solid #CCC;}
.banner .d1{width:655px;height:330px;overflow:hidden;display:block;position:absolute;left:0px;/*top:0px;*/
}
.banner .d2{width:150px;height:30px;overflow:hidden;clear:both;position:absolute;z-index:100;right:0px;bottom:0px;}
.banner .d2 table{margin:auto;height:30px;}
.banner .d2 table td{padding:0px 3px 0px 3px;}
.banner .d2 table div{width:15px;height:15px;overflow:hidden;cursor:pointer;background:#ffffff;border-radius:10px;text-align:center;border:2px solid #c0a15d;}
.banner .d2 table div.nuw{background:#c0a15d;color:#FFF;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
264.81 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
264.81 KB
立即下载
华芝琴筠
了解
打赏作者 鼓励作者
Html 滑动滚动特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章