《程序员的第一年》---------- 类似百度图片展示的功能

<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