javaScript实现图片滚动及一个普通图片轮播的代码

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