简易的图片浏览功能

最新推荐文章于 2021-01-15 13:01:07 发布

yuzan0123

最新推荐文章于 2021-01-15 13:01:07 发布

阅读量336

点赞数

文章标签： function javascript border server filter xhtml

本文链接：https://blog.csdn.net/yuzan0123/article/details/7624204

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowPicInfo.aspx.cs" Inherits="WebRoot.PictureScore.ShowPicInfo" %>

<!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="../ClientRes/jquery-1.6.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
页面构建begin
var SellerScroll = function (options) {
this.SetOptions(options);
this.lButton = this.options.lButton;
this.rButton = this.options.rButton;
this.oList = this.options.oList;
this.showSum = this.options.showSum;
this.pList = this.options.pList;
this.pWidth = $("#" + this.pList).width();
this.iList = $("#" + this.options.oList + " > li");
this.iListSum = this.iList.length;
this.iListWidth = this.iList.outerWidth(true);
this.moveWidth = this.iListWidth * this.showSum;
this.dividers = Math.ceil(this.iListSum / this.showSum); //共分为多少块
this.moveMaxOffset = (this.dividers - 1) * this.moveWidth;

this.LeftScroll();
this.RightScroll();
};

SellerScroll.prototype = {
SetOptions: function (options) {
this.options = {
lButton: "leftbtn",
rButton: "rightBtn",
oList: "carousel_ul",
pList: "carousel_inner",
showSum: 1 //一次滚动多少个items
};
$.extend(this.options, options || {});

},
ReturnLeft: function () {
return isNaN(parseInt($("#" + this.oList).css("left"))) ? 0 : parseInt($("#" + this.oList).css("left"));
},
LeftScroll: function () {
var one=<%=index %>;
if (this.dividers == 1&&one==1) return;
var _this = this, currentOffset;
currentOffset = _this.ReturnLeft();

$("#" + this.lButton).click(function () {
currentOffset = _this.ReturnLeft();
if (currentOffset < 0) {
$("#" + _this.oList + ":not(:animated)").animate({ left: "+=" + _this.moveWidth }, "slow");
} else {
var a=<%=index %>;
if (a!='1') {//如果是不是第一页则调用上一页的方法
__doPostBack('btnPreviousGroup', '');
}

}
});
},
RightScroll: function () {

if (this.dividers == 1) return;
var _this = this, currentOffset;
$("#" + this.rButton).click(function () {
currentOffset = _this.ReturnLeft();
if (_this.moveMaxOffset - Math.abs(currentOffset) >= _this.pWidth) {
$("#" + _this.oList + ":not(:animated)").animate({ left: "-=" + _this.moveWidth }, "slow");
} else {
var a=<%=index %>;
var b=<%=Session["sum"] %>;
if (a!=b) {//如果是不是最后一页则调用下一页的方法
__doPostBack('btnNextGroup', '');
}

}
});
}
};
页面构建end
</script>
<style type="text/css">
#carousel_inner
{
width: 802px;
height: 602px;
overflow: hidden;
position: relative;
}
#carousel_ul
{
width: 99999px;
height: 600px;
position: relative;
}
#carousel_ul li
{
float: left;
width: 802px;
height: 602px;
display: inline;
}
</style>
</head>
<body style="height: 100%; margin: 10px; padding: 0px; font-size: 12px;">
<form id="form1" runat="server">

<div style="padding: 10 0 10 0; border: solid 1px silver; border-top: 0; margin: 1px;
height: 100%">
<div id="carousel_inner" style="margin: 0 auto; text-align: center; vertical-align: middle;">
<div id="leftbtn" style="position: absolute; z-index: 99999; height: 600px; width: 400px;
cursor: pointer; filter: alpha(opacity=0); opacity: 0; background-color: #FFFFFF;">
</div>
<div id="rightBtn" style="position: absolute; z-index: 99999; height: 600px; width: 400px;
cursor: pointer; left: 401px; filter: alpha(opacity=0); opacity: 0; background-color: #FFFFFF;">
</div>
<div style="width: 50px; z-index: 888; margin-top: 270px; left: 50px; position: absolute;">
<img id="leftbtn1" style="cursor: pointer; display: none; width: 70px;" alt="上一张"
src="../ClientRes/images/prev.png" />
</div>
<div id="carousel_ul" runat="server">
</div>
<div style="width: 50px; z-index: 999; margin-top: -330px; position: absolute; right: 90px;">
<img style="cursor: pointer; display: none; width: 70px;" alt="下一张" id="rightBtn1"
src="../ClientRes/images/next.png" />
</div>
</div>
</div>

<div id="one" style="padding: 10 0 10 0; border: solid 1px silver; border-top: 0;
margin: 1px; height: 100%;" runat="server">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr align="center">
<td align="center">
<div style="width: 12px; z-index: 888; margin-top: -25px; position: absolute; top: 693px;">

<button dojotype="dijit.form.Button" id="btnPreviousGroup" iconclass="dijitEditorIcon dijitEditorIconSave"
showlabel="true" runat="server" onserverclick="btnPreviousGroup_Click" style="background: url(../ClientRes/images/goleft2.gif);
width: 11px; height: 56px; border-style: none; cursor: pointer; background-repeat: no-repeat;" οnclick="javascript:if(1==1){__doPostBack('btnPreviousGroup_Click','');}">
</button>
</div>
</td>
<td align="center">

<div id="minImg" runat="server" style="text-align: center; margin-top: 10px; padding: 0px 0px 20px 0px;
margin-bottom: 20px; text-align: center; margin-left: 20px; margin-right: 10px;">
</div>
</td>
<td align="center" style="margin-left: 20px;">

<div style="width: 12px; z-index: 888; margin-top: -25px; position: absolute;">
<button dojotype="dijit.form.Button" id="btnNextGroup" iconclass="dijitEditorIcon dijitEditorIconSave"
showlabel="true" runat="server" onserverclick="btnNextGroup_Click" style="background: url(../ClientRes/images/goright2.gif);
width: 11px; height: 56px; border-style: none; cursor: pointer; background-repeat: no-repeat;" οnclick="javascript:if(1==1){__doPostBack('btnNextGroup_Click','');}">
</button>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(function () {
var width = 796;
var height = 596;
$("#carousel_ul img").each(function () {
if ($(this).get(0).offsetWidth > $(this).get(0).offsetHeight) {
$(this).width(width + "px");
var vspace = height - $(this).get(0).offsetHeight;
$(this).css({ padding: vspace / 2 + "px " + "0px " + vspace / 2 + "px " + "0px" });
} else {
$(this).height(height + "px");
}
});
});
</script>
</form>
</body>
</html>