求高清图片浏览代码

Question

有没有像。QQ啊，网易啊，搜狐啊，高清图片展示的代码。趴着求。像下面这些网址的。http://news.163.com/photoview/00AN0001/15098.html#p=76DUTRT500AN0001http://news.qq.com/a/20110619/000176.htm#p=1

Answer 1

这个你得有高清的图片才行啊下面的你可以用小图对应显示或者用这个高清的图高宽限定下
这种滚动效果jquery有的，你也可以自己去写吧

Answer 2

只要有高清图片，就不是问题，放在一个背景黑色的Div就行了

Answer 3

    <script type="text/javascript" src="http://www.gldcw.com/scripts/preview_photo.js"></script> 
<style type="text/css">
.bg{ width:100%;}
.preview{ width:90%; margin:0 auto; padding-top:40px; padding-bottom:20px; border:1px solid #ddd;  margin-top:20px; _margin-top:30px; margin-bottom:20px}
.preview .view{ width:720px; position:relative; height:500px; background:url(../images/loading.gif) no-repeat center center; margin:0 auto}
.preview .view img{  width:720px; height:500px; cursor:pointer }
.preview .message{ height:30px; width:720px; line-height:30px; margin-bottom:8px; padding-left:5px ; padding-right:5px; margin:0 auto}
.preview .message .left{ float:left;}
.preview .message .right{ float:right;}
.preview .message .left span{ padding-right:10px; color: #666}
.preview .message .right span{ color: #f30}.preview .control{ height:120px; width:720px;background:#f9f9f9; margin:0 auto;}
.preview .control .curr{ width:640px; height:100px; margin:0 auto;}
.pre div,.next div{ width:100px; height:100px; margin: 0 auto}
.pre div img,.next div img{ width:95%; height:70px; display:block; margin:0 auto; }
.pre div p,.next div p{ width:95%; overflow:hidden; height:22px; text-align:center; line-height:22px; padding-top:2px}
.preview .control .curr .premove{ width:50px; height:100px; float:left; }
#premove,#nextmove{ display:block; margin:0 auto; margin-top:15px; cursor:pointer}
.preview .control .curr .wrap{ width:530px; height:100px; float:left;overflow:hidden; position:relative}
.preview .control .curr .nextmove{ width:50px; height:100px; float:left; }
.preview .control .curr .wrap .inner{}
.preview .control .curr .wrap .inner ul{ margin-top:10px;}
.preview .control .curr .wrap .inner ul li{ width:105px; height:80px; float:left; background:url(http://www.gldcw.com/images/loading.gif) no-repeat 35px 20px;}
.preview .control .curr .wrap .inner img{ width:93px; height:100%; margin:0 auto; display:block; cursor:pointer; border:1px solid #656565; position:relative}
.preview .control .curr .wrap .inner img.current{width:93px; height:100%; margin:0 auto; display:block; cursor:pointer; border:1px solid #638382}
.pull{ width:530px; margin:0 auto; position:relative; height:15px;}
.pull .pull-bar{ width:200px; position:absolute; left:0; top:0}
.pull .pull-center{ display:inline-block; background:url(http://www.gldcw.com/images/preview/pull-bg.png) repeat-x; width:100%; height:15px;}
.pull .pull-center .center{ position:absolute; left:93px;  top:0}
</style>
  <div class="cArea">        <div class="bg">
            <div class="preview" id="photoPreview">
                <div class="view" id="view">
                    <img src="" id="preview" name="preview" />
                </div>
                <div class="message">
                    <div class="left">
                        图片名称：<span id="imgName"></span> 所属相册：<span id="author"></span> 上传时间：<span id="time"></span>                    </div>
                    <div class="right">
                        第<span id="currentPage"></span> 张 &nbsp; 共<span id="all"></span> 张
                    </div>
                </div>
                <div class="control">                    <div class="curr">
                        <div class="premove">
                            <img src="http://www.gldcw.com/images/preview/pre_1.png" name="premove" id="premove" />
                        </div>
                        <div class="wrap" id="wrap">
                            <div class="inner" id="inner">
                                <ul>
                                </ul>
                                <div class="clear">                                </div>
                            </div>
                        </div>
                        <div class="nextmove">
                            <img src="http://www.gldcw.com/images/preview/next_1.png" name="nextmove" id="nextmove" />
                        </div>
                        <div class="clear">
                        </div>
                        <div class="pull" id="pull">                            <div class="pull-bar" id="pullbar" name="pullbar">
                                <span class="pull-center">
                                    <img src="http://www.gldcw.com/images/preview/pull-left.png" style="background: #FFF; float: left" />
                                    <img src="http://www.gldcw.com/images/preview/pull-center.png" class="center" />
                                    <img src="http://www.gldcw.com/images/preview/pull-right.png" style="background: #FFF; float: right" />
                                </span>
                            </div>
                        </div>
                    </div>                    <div class="clear">
                    </div>
                </div>
            </div>
        </div>
    </div>  
  <script type="text/javascript">
    var collection = [
{name:"集体照",uploadTime:"2011-4-26",src:"ba1d0cb7e50841b79d3c76e62e257ed2.jpg"},
{name:"集体照",uploadTime:"2011-4-26",src:"e4ae03ab570048dda1d90ba7a6490fd6.jpg"},
{name:"集体照",uploadTime:"2011-4-26",src:"ad0d5263d30f465d907d3d6293bcfc3b.jpg"},
{name:"集体照",uploadTime:"2011-4-26",src:"480bb006792248e0add826e697ebb5ac.jpg"}
]
    var lister = document.getElementById("inner").getElementsByTagName("ul")[0]
    var oPreview = new PhotoPreview("余姚分公司");
    oPreview.collection = collection;
    oPreview.photoPath = "http://www.gldcw.com/pictures/company/normal/";
    oPreview.thumbsPath = "http://www.gldcw.com/pictures/company/130x100/130_100-"               
    oPreview.write(lister)
    </script>

Answer 4

收到 zell419  代码.结贴了,谢谢大家.