相册浏览

最新推荐文章于 2025-07-22 00:16:16 发布

原创最新推荐文章于 2025-07-22 00:16:16 发布 · 385 阅读

CC 4.0 BY-SA版权

文章标签：

#相册 #function #webform #button #xhtml #input

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="_3_14.WebForm3" %>

<!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">

table{width:400px;border:solid 2px #128B0C;}
#bigtd img{width:300px;height:360px;}
#tr1{text-align: center;}
#tr2 td img{width:70px;height:80px;}
#btn1,#btn2{width:25px;height:80px;border-color: #18B610; color: #128B0C; font-size: 22px;}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('img').click(function () {
$('#bigimg').attr('src', this.src);
//alert('ok');
})
var pictures = new Array('3.jpg', '4.jpg', '5.jpg', '6.jpg', 'b.jpg', 'r.jpg', 'y.jpg', 'p.jpg');
var a = 0;
var b = 1;
var c = 2;
var d = 3;
$('#btn1').click(function () {
if (a > 6) { a = -1; }
a++;
$('#p1').attr('src', 'images/' + pictures[a]);
if (b > 6) { b = -1; }
b++;
$('#p2').attr('src', 'images/' + pictures[b]);
if (c > 6) { c = -1; }
c++;
$('#p3').attr('src', 'images/' + pictures[c]);
if (d > 6) { d = -1; }
d++;
$('#p4').attr('src', 'images/' + pictures[d]);
})

$('#btn2').click(function () {
if (a < 1) { a = 8; }
a--;
$('#p1').attr('src', 'images/' + pictures[a]);
if (b <1) { b = 8; }
b--;
$('#p2').attr('src', 'images/' + pictures[b]);
if (c <1) { c =8; }
c--;
//alert(c);
$('#p3').attr('src', 'images/' + pictures[c]);
if (d <1) { d = 8; }
d--;
$('#p4').attr('src', 'images/' + pictures[d]);
})
})
</script>

</head>
<body>
<form id="form1" runat="server">
<div>

<table class="style1">
<tr id="tr1">
<td colspan="6" id="bigtd">
<img alt="图片" src="images/3.jpg" id="bigimg"/></td>
</tr>
<tr id="tr2">
<td>
<input id="btn1" type="button" value="◁"/></td>
<td >
<img alt="图片" src="images/3.jpg" id='p1'/></td>
<td >
<img alt="图片" src="images/4.jpg" id='p2'/></td>
<td >
<img alt="图片" src="images/5.jpg" id='p3'/></td>
<td >
<img alt="图片" src="images/6.jpg" id='p4'/></td>
<td >
<input id="btn2" type="button" value="▷" /></td>
</tr>
</table>
</div>
</form>
<p>
 </p>
</body>
</html>