图片轮换功能实现 .

最新推荐文章于 2022-04-30 11:40:35 发布

haoshilu123

最新推荐文章于 2022-04-30 11:40:35 发布

阅读量374

点赞数

分类专栏： javascript 文章标签： menu filter function 文档 url

本文链接：https://blog.csdn.net/haoshilu123/article/details/6927371

版权

javascript 专栏收录该内容

10 篇文章 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";
indindex=ind;
}
function $(id)
{
return document.getElementById(id);
}
</script>
</head>
<body onload="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" onmouseover="showImage(1);"><img src="images/btn_01.jpg"/></li>
<li id="menu2" onmouseover="showImage(2);"><img src="images/btn_02.jpg"/></li>
<li id="menu3" onmouseover="showImage(3);"><img src="images/btn_03.jpg"/></li>
<li id="menu4" onmouseover="showImage(4);"><img src="images/btn_04.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>

haoshilu123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮换功能实现 .

> 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:510p
复制链接

扫一扫