实现如图效果 图片将自动转换 鼠标指向右边的图片在左边的大图位置显示相应的图片
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inherits="图片轮换.WebForm7" %>
<!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 runat="server">
<title>无标题文档</title>
<style type="text/css">
#picbox{
510px;
margin:auto;
background-color:#F0F0F0;
padding:10px;
overflow:auto;
border:1px solid gray;
}
#pic{
400px;
height:260px;
float:left;
overflow:hidden;
}
#pic .imgDiv{
position:relative;
}
#pic .imgDiv span{
display:block;
200px;
height:20px;
position:absolute;
left:10px;
bottom:10px;
color:white;
font-size:12px;
}
#pic img{
400px;
height:260px;
}
#nav{
95px;
float:right;
margin-left:10px;
}
#nav ul{
list-style:none;
padding:0;
margin:0;
}
#nav ul li{
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-color：black;
filter:alpha(opacity=100);
opacity:1!important;
}
#nav ul li img{
78px;
height:47px;
}
</style>
<script type="text/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 onload="autoChange();">
<div id="picbox">
<div id="pic">
<div class="imgDiv" id="imgDiv1">
<img src="images/one.jpg"/> // 这些文字是在图片左下角显示的文字
<span>真漂亮</span>
</div>
<div class="imgDiv" id="imgDiv2" style="display:none">
<img src="images/two.jpg"/>
<span>好看</span>
</div>
<div class="imgDiv" id="imgDiv3" style="display:none">
<img src="images/three.jpg"/>
<span>色彩斑斓</span>
</div>
<div class="imgDiv" id="imgDiv4" style="display:none">
<img src="images/four.jpg"/>
<span>温馨</span>
</div>
</div>
<div id="nav">
<ul>
<li id="menu1" onmouseover="showImage(1);"><img src="images/one.jpg"/></li> //这些是要轮换的图片
<li id="menu2" onmouseover="showImage(2);"><img src="images/two.jpg"/></li>
<li id="menu3" onmouseover="showImage(3);"><img src="images/three.jpg"/></li>
<li id="menu4" onmouseover="showImage(4);"><img src="images/four.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>