javaScript实现图片滚动及一个普通图片轮播的代码-优快云博客

本文介绍了一种基于HTML和CSS实现的医院图片滚动展示与轮播功能，通过使用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>

转载于:https://www.cnblogs.com/whytohow/p/4980904.html