图片轮换功能实现

最新推荐文章于 2021-04-01 13:35:49 发布

幸福的小木鱼

最新推荐文章于 2021-04-01 13:35:49 发布

阅读量494

点赞数

分类专栏： JavaScript 文章标签： menu function class xhtml filter html

本文链接：https://blog.csdn.net/lin_lujian/article/details/6914198

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>无标题文档</title>
<style type="text/css">
	#picbox{
		width:510px;
		margin:auto;
		background-color:#F0F0F0;
		padding:10px;
		overflow:auto;
		border:1px solid gray;
	}
	#pic{
		width:400px;
		height:260px;
		float:left;
		overflow:hidden;
	}
	#pic .imgDiv{
		position:relative;/**设置为包含块*/
	}
	#pic .imgDiv span{
		display:block;
		width:200px;
		height:20px;
		position:absolute;
		left:10px;
		bottom:10px;
		color:white;
		font-size:12px;
	}
	#pic img{
		width:400px;
		height:260px;
	}
	#nav{
		width:95px;
		float:right;
		margin-left:10px;
	}
	#nav ul{
		list-style:none;
		padding:0;
		margin:0;
	}
	#nav ul li{
		width:91px;
		height:57px;
		padding-top:5px;
		padding-bottom:5px;
		padding-left:10px;
		filter:alpha(opacity=50);
		opacity:0.5!important;
	}
	#nav ul li.hover{
		background-image:url(images/ifocus_btn_bg.gif);
		filter:alpha(opacity=100);
		opacity:1!important;
	}
	#nav ul li img{
		width:78px;
		height:47px;
	}
</style>
<script language="javascript">
	var index=1;
	function autoChange()
	{
		showImage(index);
		index++;
		if(index>4){
			index=1;
		}
		setTimeout("autoChange()",3000);
	}
	function showImage(ind)
	{
		for(var i=1;i<=4;i++)
		{
			$("menu"+i).className="";
			$("imgDiv"+i).style.display="none";
		}
		$("menu"+ind).className="hover";
		$("imgDiv"+ind).style.display="block";
		index=ind;
	}
	function $(id)
	{
		return document.getElementById(id);
	}
</script>
</head>

<body οnlοad="autoChange();">
	<div id="picbox">
		<div id="pic">
			<div class="imgDiv" id="imgDiv1">
				<img src="images/01.jpg"/>
				<span>哈哈哈，嚯嚯嚯!!!</span>
			</div>
			<div class="imgDiv" id="imgDiv2" style="display:none">
				<img src="images/02.jpg"/>
				<span>啊啊啊，哈哈哈~~~</span>
			</div>
			<div class="imgDiv" id="imgDiv3" style="display:none">
				<img src="images/03.jpg"/>
				<span>啦啦啦，呀呀呀???</span>
			</div>
			<div class="imgDiv" id="imgDiv4" style="display:none">
				<img src="images/04.jpg"/>
				<span>哈哈哈，啦啦啦!!!</span>
			</div>
		</div>
		<div id="nav">
			<ul>
				<li id="menu1" οnmοuseοver="showImage(1);"><img src="images/btn_01.jpg"/></li>
				<li id="menu2" οnmοuseοver="showImage(2);"><img src="images/btn_02.jpg"/></li>
				<li id="menu3" οnmοuseοver="showImage(3);"><img src="images/btn_03.jpg"/></li>
				<li id="menu4" οnmοuseοver="showImage(4);"><img src="images/btn_04.jpg"/></li>
			</ul>
		</div>
	</div>
</body>
</html>