sandy945 图片展示 ： 下面的有没有简洁的js展示代码

本帖最后由 plglenn26 于 2009-12-16 10:40:31 编辑

解决方案 »

  1.   

    啥？
    有个js控件，叫什么？
    lightbox吧
      

  2.   

    http://food.100du.com/album/1208412653182#
      

  3.   

    你这是jquey 的事例  你去网上搜搜 有很多
      

  4.   

    这个不用ajax 的， 普通的js 操作就可以的每次把 所有图片的路径 放回 ， 在js 用 array 的形式 存储然后控制显示就可以的
      

  5.   

    非哥，写这些demo是不是很流畅了。
    想都不用想的？
    看你回帖基本上都是自己写的。
      

  6.   

    JS实现图片浏览
    http://www.twospy.com/galleriffic/index.html
    可到百度里看看图片的效果
      

  7.   


    <!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>
            $ = function(id) {
                return document.getElementById(id);
            }
            var pageSize = 2;
            var currentPageIndex = 0;
            var pageCount = 0;        function changeSrc(src,num) {
                $('spanCurrent').innerHTML = currentPageIndex * pageSize + 1 + num;
                $('imgO').src = src.replace('_100.jpg', '.jpg');
            }        function changePageIndex(str) {            if ((str == 'p' && currentPageIndex < 1) || (str == 'n' && currentPageIndex > pageCount - 2)) {
                    return;
                }
                if (str == 'p') {
                    currentPageIndex = currentPageIndex < 1 ? 1 : currentPageIndex - 1;                
                }
                else {
                    if (typeof imgArray != 'undefined' && imgArray instanceof Array) {
                        currentPageIndex = currentPageIndex > pageCount -2 ? pageCount : currentPageIndex + 1;
                    }
                }
                init();
            }
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <span id='spanP' onclick='changePageIndex("p");' ><</span>
        <img id='imgOne' onclick='changeSrc(this.src,0);' />
        <img id='imgTwo' onclick='changeSrc(this.src,1);' />
        <span id='spanN' onclick='changePageIndex("n");' >></span>
        </div>
        第<span id='spanCurrent'>0</span>/<span id='spanLength'>0</span>张
        <div>
        <img id='imgO' />
        </div>
        <script>
            function init() {
                if (typeof imgArray != 'undefined' && imgArray instanceof Array) {
                    
                    //为了能看到效果，可以取消
                    $('imgOne').src = '';
                    $('imgTwo').src = '';                
                    
                    $('imgOne').src = imgArray[currentPageIndex * pageSize];
                    if (currentPageIndex * pageSize + 1 >= imgArray.length) {
                        $('imgTwo').style.display = "none";
                    }
                    else {
                        $('imgTwo').style.display = "";
                        $('imgTwo').src = imgArray[currentPageIndex * pageSize + 1];
                    }
                    
                    $('imgO').src = $('imgOne').src.replace('_100.jpg', '.jpg');                
                    $('spanLength').innerHTML = imgArray.length;
                }
            }//end function init
            if (typeof imgArray != 'undefined' && imgArray instanceof Array) {
                pageCount = imgArray.length % pageSize == 0 ? imgArray.length / pageSize : Math.floor(imgArray.length / pageSize) + 1;
                $('spanCurrent').innerHTML = 1;     
            }
            init();                
        </script>
        </form>
    </body>
    </html>    protected void Page_Load(object sender, EventArgs e)
        {
            string jsArray = @" imgArray = new Array();
                                imgArray.push('http://photo.100du.com/store_album/10/1d/3e/23380_100.jpg');
                                imgArray.push('http://photo.100du.com/store_album/fe/c9/eb/23379_100.jpg');
                                imgArray.push('http://photo.100du.com/store_album/02/26/aa/23378_100.jpg');
                                imgArray.push('http://photo.100du.com/store_album/dd/e5/af/23377_100.jpg');
                                imgArray.push('http://photo.100du.com/store_album/0e/ad/71/23376_100.jpg');
                            ";
            ClientScript.RegisterClientScriptBlock(GetType(), "setArray", jsArray, true);
        }