jquery医院网站banner切换滑动特效代码下载


jquery医院网站banner切换滑动特效代码下载
jquery医院网站banner切换滑动特效代码下载以及切换滑动等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/index.css" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/banner.js"></script>

3. HTML代码

<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>

相关推荐

发表评论

相关文章