<script type="text/javascript">
function bigPic(obj, code) {
document.getElementById("BigPic").src = obj;
document.getElementById("ArtWork").href = code;
document.getElementById("CurrentCode").innerHTML = code;
}
function window.onload() {
var src = document.getElementById("BigPic").src;
//取得当前图片,使其高亮
if (document.getElementById("listBox").getElementsByTagName("li").length > 2) {
for (var i = 1, length = document.getElementById("listBox").getElementsByTagName("li").length; i < length - 1; i++) {
if (document.getElementById("listBox").getElementsByTagName("li")[i].getElementsByTagName("img")[0].src == src) {
document.getElementById("listBox").getElementsByTagName("li")[i].click();
document.getElementById("listBox").getElementsByTagName("li")[i].getElementsByTagName("img")[0].click();
}
// document.getElementById("listBox").getElementsByTagName("li")[1].click();
// document.getElementById("listBox").getElementsByTagName("li")[1].getElementsByTagName("img")[0].click();
}
}
}
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/*焦点图*/
.btn{position:absolute;width:15px;height:70px; cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
#prevTop, #nextTop{ width:46px;height:48px;position:relative; }
#prevTop{background:url(../images/prevBtnTop.png) 0 0 no-repeat;
top:250px;
left:5px;
z-index:99;
position:absolute;
}
#nextTop{background:url(../images/nextBtnTop.png) 0 0 no-repeat;
top:250px;
right:2px;
z-index:99;
position:absolute;
left: 652px;
}
li{float:left;}
.cf li{position:relative;color:#fff;}
.cf a{display:block;width:100px;height:600px;position:absolute;color:#fff;}
.cf li span{display:block;width:100px;position:absolute;left:0;bottom:0;padding:10px 20px;line-height:22px;text-align:left;background:rgba
(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
.listBox{width:100px;height:600px;margin:0 auto;position:relative;padding-top:10px;overflow:hidden;}
.listBox ul{height:600px;position:absolute;}
.listBox li{width:100px;height:70px;cursor:pointer;position:relative;}
.listBox li i{display:none;}
.listBox li a{display:block;width:100px;height:70px;}
.listBox li img{width:100px;height:70px;}
.listBox .on img{width:94px;height:64px;border:3px solid #ff6600;}
.listBox .on i{display:block;}
</style>
==========================
<div style=" width:980px;">
<div class="picBox" style=" width:770px; float:left;">
<div style=" width:100%; text-align:left; margin-bottom:10px;">
路径:
<asp:Repeater ID="RepeaterClassNavigate" runat="server" EnableViewState="false">
<ItemTemplate >
><a href="PhotoClassPhotos.aspx?ClassId=<%#文件夹ID%>"><%#Eval("Name")%></a>
</ItemTemplate>
</asp:Repeater>
><span id="CurrentCode"> </span> <asp:Label ID="lblCode" runat="server" Text=""></asp:Label>
</div>
<%-- <%#_photo.GetZoomUrl(700)%>--%>
<div style=" width:700px; height:700px; position:relative; z-index:5; ">
<img id="BigPic" src="<% =当前图片地址 %>"
style=" z-index:6; position:relative; top: 0px; border:1px solid rgb(223,223,223); left: 0px;" width="700"
height="600" alt="" />
<span id="prevTop" class="btn prev"></span>
<span id="nextTop" class="btn next"></span>
<span><a id="ArtWork" href="#">原图</a></span>
</div>
</div>
<div style=" width:100px;float:left;">
<asp:Button ID="btnpre" runat="server" Text="上一页" οnclick="btnpre_Click" />
<div id="listBox" style=" margin:0px; padding:0px;" class="listBox">
<ul class="cf" style=" margin:0px; padding:0px;">
<li > <img width="100" height="70" src='../images/FirstPic.png' alt="第一张" /></li>
<asp:Repeater ID="RepeaterBigPhotos" runat="server">
<ItemTemplate>
<asp:HiddenField ID="HiddenField1" runat="server" Value="<%#photo=Container.DataItem as Photo %>" />
<li > <img width="100" οnclick='bigPic("<%#图片地址%>","<%#图片ID%>")' height="70" src='<%#图片地址 %>' alt="<%#图片标题%>" /></li>
</ItemTemplate>
</asp:Repeater>
<li > <img width="100" height="70" src='../images/LastPic.png' alt="最后一张" /></li>
</ul>
</div>
<script type="text/javascript">
(function () {
function G(s) {
return document.getElementById(s);
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function Animate(obj, json) {
if (obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function () {
for (var attr in json) {
var iCur = parseInt(getStyle(obj, attr));
iCur = iCur ? iCur : 0;
var iSpeed = (json[attr] - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
obj.style[attr] = iCur + iSpeed + 'px';
if (iCur == json[attr]) {
clearInterval(obj.timer);
}
}
}, 30);
}
var oList = G("listBox");
var oPrevTop = G("prevTop");
var oNextTop = G("nextTop");
var oListLi = oList.getElementsByTagName("li");
var len2 = oListLi.length;
var oListUl = oList.getElementsByTagName("ul")[0];
var w2 = oListLi[0].offsetHeight;
oListUl.style.height = w2 * len2 + "px";
var index = 0;
var num = 8;
var num2 = Math.ceil(num / 2);
function Change() {
if (index < 1) {
Animate(oListUl, { left: 0 });
} else if (index + num2 <= len2) {
Animate(oListUl, { top: -(index - num2 + 1) * w2 });
} else {
Animate(oListUl, { top: -(len2 - num) * w2 });
}
for (var i = 0; i < len2; i++) {
oListLi[i].className = "";
if (i == index) {
oListLi[i].className = "on";
}
}
}
oNextTop.onclick = function () {
index++;
index = index == len2 ? 0 : index;
if (index > 0 && index < len2) {
document.getElementById("listBox").getElementsByTagName("li")[index].click();
document.getElementById("listBox").getElementsByTagName("li")[index].getElementsByTagName("img")[0].click();
}
Change();
}
oPrevTop.onclick = function () {
index--;
index = index == -1 ? len2 - 1 : index;
if (index > 0 && index < len2) {
document.getElementById("listBox").getElementsByTagName("li")[index].click();
document.getElementById("listBox").getElementsByTagName("li")[index].getElementsByTagName("img")[0].click();
}
Change();
}
for (var i = 0; i < len2; i++) {
oListLi[i].index = i;
oListLi[i].onclick = function () {
index = this.index;
Change();
}
}
})()
</script>
<asp:Button ID="btnnext" runat="server" Text="下一页" οnclick="btnnext_Click" />
</div>
</div>
本文来自:http://www.5ufanli.net