一个很好的相册切换效果(自我感觉好,希望大家别见笑)

Question

还不错给大家公开源码吧虽然是简单的ajax效果

Answer 1

另外也可以<div>中 的img  根据#5 ¦6 ¦4 来生成 图片src和效果不知道，楼主用的什么巧妙的办法，感觉速度很快啊

Answer 2

代码有兴趣的自己可以去研究.
也没有什么复杂的. 也就自己写了一个photo类,用来处理数据.
顺便利用了下json, 简单的ajax. 

Answer 3

function PhptoView(cur_id,next_id,pre_id){
    this.sourceID=cur_id;
    this.cur_id=cur_id;
    this.next_id=next_id;
    this.pre_id=pre_id;
    this.page='';
}
PhptoView.prototype={
    g_url:'/ajax_act_scripts/get_photo_info.php',
    g_type:'',
    __init:function(){
        var hash=window.location.hash;
        hash=hash.substr(1,hash.length-1);
        if(hash){
            hArr=hash.split('|');
            if(hArr.length==3){
                c=hArr[0];
                n=hArr[1];
                p=hArr[2];
                if(this.cur_id == c){return;}
                else{
                    this.cur_id=c;
                    this.next_id=n;
                    this.pre_id=p;
                    this.__getCurrent();
                }
            }
        }
    },
    __getPage:function(){
        this.page='';
        if( this.pre_id != "0"){
            this.page += "<a href='javascript:photo.__getPre();'>上一张</a>  ";
        }
        if(this.next_id != "0"){
            this.page += "  <a href='javascript:photo.__getNext();'>下一张</a>";
        }
        this.__hideLoading();
        return this.page;
    },
    __getCurrent:function(){
        this.g_type='current';
        this.__setRemoteUrl('/ajax_act_scripts/get_photo_info.php');
        this.__setRemoteUrl(this.g_url+'?s='+this.g_type+'&photo_id='+this.cur_id+'&source='+this.sourceID);
        this.__getPhoto(this.cur_id);
    },
    __getNext:function(){
        if(this.next_id < 1){alert('这已经是最后一张了!');return;}
        this.__showLoading();
        this.g_type='next';
        this.__setRemoteUrl('/ajax_act_scripts/get_photo_info.php');
        this.__setRemoteUrl(this.g_url+'?s='+this.g_type+'&photo_id='+this.next_id+'&source='+this.sourceID);
        this.__getPhoto(this.next_id);
    },
    __getPre:function(){
        if(this.pre_id < 1){alert('这是第一张!');return;}
        this.__showLoading();
        this.g_type='pre';
        this.__setRemoteUrl('/ajax_act_scripts/get_photo_info.php');
        this.__setRemoteUrl(this.g_url+'?s='+this.g_type+'&photo_id='+this.pre_id+'&source='+this.sourceID);
        this.__getPhoto(this.pre_id);
    },
    __getPhoto:function(photo_id){
        xmlHttp = new createXHR();
        var __self = this;
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                //alert(xmlHttp.responseText);return;
                var json = eval('('+xmlHttp.responseText+')');
                if(json.error){return;}
                __self.__setPhotoInfo(json);
                if(__self.g_type=='next'){
                    $('comment.target_id').value=__self.next_id;
                    __self.pre_id=__self.cur_id;
                    __self.cur_id=__self.next_id;
                    __self.next_id=json.otherId;
                    $('Photo_PageHTML').innerHTML=__self.__getPage();
                    
                    window.location.hash='#'+__self.cur_id+'|'+__self.next_id+'|'+__self.pre_id;
                }else if(__self.g_type=='pre'){
                    $('comment.target_id').value=__self.pre_id;
                    __self.next_id=__self.cur_id;
                    __self.cur_id=__self.pre_id;
                    __self.pre_id=json.otherId;
                    $('Photo_PageHTML').innerHTML=__self.__getPage();
                    
                    window.location.hash='#'+__self.cur_id+'|'+__self.next_id+'|'+__self.pre_id;
                }else if(__self.g_type=='current'){
                    $('comment.target_id').value=__self.cur_id;
                    $('Photo_PageHTML').innerHTML=__self.__getPage();
                }
            }
        };
        xmlHttp.open('get',this.g_url,true);
        xmlHttp.send(null);
    },
    __setRemoteUrl:function(url){
        this.g_url=url;        
    },
    __setPhotoInfo:function(json){
        $('Photo_DescHTML').innerHTML=json.phtoInfo['desc'];
        try{
            $('Photo_Src').filters[0].apply();
            $('Photo_Src').filters.revealTrans.transition=23
        }catch(e){}
        $('Photo_Src').src=json.phtoInfo['p_dir']+json.phtoInfo['b_name'];
        try{
            $('Photo_Src').filters[0].play();
        }catch(e){}
        
        $('Photo_VcountHTML').innerHTML=json.phtoInfo['v_count'];
        $('Photo_CcountHTML').innerHTML=json.phtoInfo['c_count'];
        var dArr = json.phtoInfo['up_time'].split('-');
        $('Photo_UptimeHTML').innerHTML=dArr[0]+'年'+dArr[1]+'月'+dArr[2].substr(0,2)+'日';
        $('commentslist').innerHTML=json.commentStr;
        $('Comment_pagelist').innerHTML=json.showPage;
    },
    __showLoading:function(){
        $('Photo_Loading').style.display='';
    },
    __hideLoading:function(){
        $('Photo_Loading').style.display='none';
    }
}重要的是这个photo类,使用了JQuery.js