<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style rel="stylesheet" type="text/css">
.expert{float:left;height:134px;width:300px;overflow:hidden;}
.expert01,.expert02{float:left}
.important{float:left;width:900%}/*备用宽度范围*/
p{display:inline-block;}
.mainimage{float:left;}
.mainimage img{width:700px;height:300px;display:inline-block;}
</style>
</head>
<body>
<!--图片滚动-->
<div class="expert">
<div class="important">
<div class="expert01">
<p><img src="hospital/image/20140500003.jpg"/></p>
<p><img src="hospital/image/20140500004.jpg"/></p>
<p><img src="hospital/image/20140500005.jpg"/></p>
</div>
<div class="expert02"></div>
</div>
</div>
<br/>
<div style="clear:both;"></div>
<br/>
<!--图片轮播-->
<div class="mainimage" onmouseover = "clr()" onmouseout="rset()">
<a href="#"><img class="cap01" style="display:inline-block;" src="hospital/image/caption01.jpg" alt="caption01"/></a>
<a href="#" ><img class="cap02" style="display:none;" src="hospital/image/caption02.jpg" alt="caption02"/></a>
<a href="#"><img class="cap03" style="display:none;" src="hospital/image/caption03.jpg" alt="caption03"/></a>
<a href="#"><img class="cap04" style="display:none;" src="hospital/image/caption04.jpg" alt="caption04"/></a>
</div>
</body>
</html>
<script>//图片滚动
var speed=10; //数字越大速度越慢
var tab=document.getElementsByClassName("expert")[0];
var tab1=document.getElementsByClassName("expert01")[0];
var tab2=document.getElementsByClassName("expert02")[0];
tab2.innerHTML=tab1.innerHTML;//注意把该script放在后边，因为调用了innerHTML属性，需要等全部文档加载完成才行
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
{tab.scrollLeft-=tab1.offsetWidth;
}
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval("Marquee()",speed);
tab.onmouseover=function() {clearInterval(MyMar)};//简单的事件触发函数
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
//图片轮播
var i = 0;
function switchimg(){
i++;
var a = document.getElementsByClassName("cap01")[0];
var b = document.getElementsByClassName("cap02")[0];
var c = document.getElementsByClassName("cap03")[0];
var d = document.getElementsByClassName("cap04")[0];
if(i == 4){
i = 0;
}
switch(i){
case 0:
a.style.display = "inline-block";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
break;
case 1:
a.style.display = "none";
b.style.display = "inline-block";
c.style.display = "none";
d.style.display = "none";
break;
case 2:
a.style.display = "none";
b.style.display = "none";
c.style.display = "inline-block";
d.style.display = "none";
break;
case 3:
a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "inline-block";
break;
}
};
var swimg = setInterval("switchimg()",2000);
function clr(){clearInterval(swimg);}
function rset(){
swimg =setInterval("switchimg()",2000);
}
</script>
