<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<script src="Scripts/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("table tr td img[name=1]").click(function () {
//这里是清除原来的状态
$("table tr td img[name=1]").each(function () {
$(this).css("border", "0px");
});
//这里设置当前选中的项
$(this).css("border", "3px green solid");
$("#disp").attr("src", $(this).attr("src"));
count = $(this).attr("id"); //给下面的下标赋值
})
//以上是向下边动
// $("#disp").click(function () {
// })
//鼠标移上去的时候显示左右按钮
$("#disp").mouseover(function () {
// $("#left").css({ top: 150, left: 20 });
// $("#right").css({ top: 150, left: 710 });
$("#left").show();
$("#right").show();
})
//鼠标移上去的时候显示左右按钮
$("#disp").mouseleave(function () {
$("#left").hide();
$("#right").hide();
})
//绑定Left事件
var count = 1;
$("#left").bind("click", function () {
count--;
if (count < 1) {
count = 5;
}
$("#disp").attr("src", "Image/" + count + ".jpg");
//消除所有原来的状态
$("table tr td img[name=1]").each(function () {
$(this).css("border", "0px");
});
$("table tr td img[id=" + count + "]").css("border", "3px green solid");
});
//绑定Rigth 事件
$("#right").bind("click", function () {
count++;
if (count > 5) {
count = 1;
}
$("#disp").attr("src", "Image/" + count + ".jpg");
//消除原来的状态
$("table tr td img[name=1]").each(function () {
$(this).css("border", "0px");
});
$("table tr td img[id=" + count + "]").css("border", "3px green solid");
});
//
$("#left").mouseover(function () {
$("#left").show();
})
$("#right").mouseover(function () {
$("#right").show();
})
})
</script>
<style type="text/css">
.style1
{
width: 101%;
}
.style2
{
text-align: center;
}
.choseimg
{
border:3px green solid;
}
.nochoseimg
{
border:1px red solid;
}
#left
{
position:absolute;
float:left;
width: 152px;
height: 90px;
display:none;
top:150px;
left: 20px;
}
#right
{
position:absolute;
float:right;
width: 152px;
height: 90px;
display:none;
top: 150px;
left: 710px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 858px">
<table class="style1">
<tr>
<td class="style2">
<img id="disp" alt="" src="Image/1.jpg" style="height: 361px; width: 846px" /></td>
</tr>
<tr>
<td class="style2">
<table style="width:100%;">
<tr>
<td>
<img id="1" alt="" name="1" src="Image/1.jpg" style="height: 110px; width: 165px" /></td>
<td>
<img id="2" alt="" name="1" src="Image/2.jpg" style="height: 110px; width: 175px" /></td>
<td>
<img id="3" alt="" name="1" src="Image/3.jpg" style="height: 110px; width: 151px" /></td>
<td>
<img id="4" alt="" name="1" src="Image/4.jpg" style="height: 110px; width: 151px" /></td>
<td>
<img id="5" alt="" name="1" src="Image/5.jpg" style="height: 110px; width: 172px" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
<div id="left"><img id="goleft" src="Image/left.png" /></div>
<div id="right"><img id="gorigth" src="Image/right.png" /></div>
</body>
</html>