phpcms-v9中图集详情页幻灯片特效的js代码分析

一.phpcms-v9中图集详情页可以改造成如下这种风格:
 
 
 
二、所用到的js文件有statics/js/jquey.sgallery.js文件和statics/js/show_picture.js文件
 
1.statics/js/jquey.sgallery.js文件分析:
 
//图集详情页使用       参数1：scaling-是否自动缩放图像                参数2：width-自定义宽度              参数3：height-自定义高度             参数4：loadpic-要加载的原始图片   
jQuery.fn.LoadImage=function(scaling,width,height,loadpic,call_back){   
    //加载中…图片   
    if(loadpic==null)loadpic="../images/msg_img/loading.gif";   
   return this.each(function(){   
       //t-当前要加载图片的<img src="">对象   
       var t=$(this);   
       //当前要加载图片的<img>标签的src属性值，即：原图的src属性值   
       var src=$(this).attr("src");   
       //创建一个图像对象   
       var img=new Image();   
       //将原图的src属性值赋值给新创建的img对象   
       img.src=src;   
       //自动缩放图片   
       var autoScaling=function(){   
        //scaling-是否自动缩放图像   
        if(scaling){   
             //首先要保证要加载的图像的宽度和高度都大于零   
             if(img.width>0 && img.height>0){    
                   //缩放比率：  要加载图片的宽度/要加载图片的高度            >    自定义宽度 /自定义高度   
                   if(img.width/img.height>=width/height){    
                           //要加载图片的宽度       >  自定义宽度   
                           if(img.width>width){    
                               //将自定义宽度作为要加载图片的宽度，也就是要加载图片的宽度被缩小了   
                               t.width(width);   
                               //要加载图片的高度也做相应的处理   
                               t.height((img.height*width)/img.width);    
                           }else{//要加载图片的宽度     <     自定义宽度  的情况    
                               t.width(img.width);//将要加载图片的宽度设置为自定义的宽度    
                               t.height(img.height);//将要加载图片的高度设置为自定义的高度   
                           }    
                   } else{    
                           if(img.height>height){    
                               t.height(height);    
                               t.width((img.width*height)/img.height);    
                           }else{    
                               t.width(img.width);    
                               t.height(img.height);    
                           }    
                   }    
               }   
        }   
        //参数5：call_back-回调函数，在这里是show_picture.js中的load_images函数   
        //等价于load_images(t.height());   
        //t.height()-图片被处理后的最终高度   
        call_back(t.height());   
   }   
2.statics/js/show_picture.js文件分析:
 
$(document).ready(function(){   
    //获取锚点即当前图片id   
    //如：会获取到index.php?m=content&c=index&a=show&catid=71&id=2#3中的#3   
    var picid = location.hash;   
    //将#截取掉，得到当前切换到的图片id：3   
    picid = picid.substring(1);   
    if(isNaN(picid) || picid=='' || picid==null) {   
        //如果图片id不存在，则设置为第一张图片的id   
        picid = 1;   
    }   
    picid = parseInt(picid);   
    //图集图片总数   
    var totalnum = $("#pictureurls li").length;   
    //如果当前图片id大于图片数，显示第一张图片   
    if(picid > totalnum || picid < 1) {   
        picid = 1;   
        next_picid = 1; //下一张图片id   
    } else {   
        //否则显示下一张图片id   
        next_picid = picid + 1;   
    }   
    //要加载的原图的url地址：通过dom来获取模板中当前标签的rel属性的值   
    url = $("#pictureurls li:nth-child("+picid+") img").attr("rel");   
    //图集详情页幻灯效果中间的大图，也即：要加载的图片      ，此标签是通过js动态创建的，模板文件中原本不存在   
    $("#big-pic").html("<img src='"+url+"' onload='loadpic("+next_picid+")' onclick='showpic(/"next/")' style='cursor:pointer;'>");   
    //自定义要加载图片的宽度为800、高度为650   
    $('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);   
    //如：1/7 – 代表这个图集中有7张图片，当前显示的是第一张图片   
    $("#picnum").html("<span>"+picid+"</span> / "+totalnum);   
    //当前图片的描述信息   
    $("#picinfo").html($("#pictureurls li:nth-child("+picid+") img").attr("alt"));   
    //大图中间的提示信息   
    $("#futitle").fadeIn(3000,function(){   
        $("#futitle").fadeOut(4000);   
    });   
    //切换到对应的图片   
    $("#pictureurls li").click(function(){   
        i = $(this).index() + 1;   
        showpic(i);//显示图片   
    });   
   
    //加载时图片滚动到中间：获取所有<li>元素的总宽度   
    var _w = $('.cont li').width()*$('.cont li').length;   
    if(picid>2) {   
        //移动步长   
        movestep = picid – 3;   
    } else {   
        movestep = 0;   
    }   
    var _ws = $('.cont li').width()*movestep;   
    //通过css样式来控制左移位置   
    $(".cont ul").css({"left":-+_ws});   
   
    //点击图片滚动   
    $('.cont ul').width(_w+200);   
    $(".cont li").click( function () {   
        if($(this).index()>2){   
            movestep = $(this).index() – 2;   
            $(".cont ul").css({"left":-+$('.cont li').width()*movestep});   
        }   
    });   
    //当前缩略图添加样式   
    $("#pictureurls li:nth-child("+picid+")").addClass("np");   
   
});   
   
   
//通过键盘的左右键控制图集详情页的幻灯片切换   
$(document).keyup(function(e) {        
    var currKey=0,e=e||event;   
    currKey=e.keyCode||e.which||e.charCode;   
    switch(currKey) {        
        case 37: // left：切换到上一张图片   
            showpic('pre');   
            break;   
        case 39: // up：切换到下一张图片   
            showpic('next');   
            break;   
        case 13: // enter：切换图集   
            var nextpicurl = $('#next_thumb').attr('href');//获取下一个图集的url地址   
            if(nextpicurl !== '' || nextpicurl !== 'null') {   
                window.location=nextpicurl;//直接跳转到下一图集   
            }   
            break;   
    }      
});   
   
//图集详情页会使用到此函数：设置要加载图片的高度   
function load_images(height) {   
    var _h = $("#big-pic img").css("height");   
    $(".tjxx_img").height(_h);   
}   
   
   
//type : next-下一张      pre-上一张     replay：是否重播   
function showpic(type, replay) {   
    //隐藏重复播放div   
    //$("#endSelect").hide();   
   
    //图集图片总数   
    var totalnum = $("#pictureurls li").length;   
    if(type=='next' || type=='pre') {   
        //获取锚点即当前图片id   
        //如：会获取到index.php?m=content&c=index&a=show&catid=71&id=2#3中的#3   
        var picid = location.hash;//#3   
        picid = picid.substring(1);//3   
        if(isNaN(picid) || picid=='' || picid==null) {   
            picid = 1;   
        }   
        //当前图片id   
        picid = parseInt(picid);   
        //下一张   
        if(type=='next') {   
            i = picid + 1;//当前图片id加1   
            //如果是最后一张图片，指针指向第一张   
            if(i > totalnum) {   
                //如果当前是最后一张图片，提示最后一页   
                var next_url = $("#next_thumb").attr('href');   
                if(next_url!=''){   
                    window.location.href = next_url;//提示最后一张   
                    return false;   
                }   
                i=1;//如果是最后一张图片，指针指向第一张   
                next_picid=1;//下一张图片id重置为1   
                //重新播放   
                if(replay!=1) {   
                    return false;   
                }   
            } else {   
                //下一张图片id   
                next_picid = parseInt(i) + 1;   
            }   
        } else if (type=='pre') {   
            i = picid – 1;//当前图片id减1   
            //如果是第一张图片，指针指向最后一张   
            if(i < 1) {   
                i=totalnum;//如果是第一张图片，指针指向最后一张   
                next_picid = totalnum;   
            } else {   
                next_picid = parseInt(i) – 1;   
            }   
        }   
           
        //当前选中的图片的url   
        url = $("#pictureurls li:nth-child("+i+") img").attr("rel");   
        //图集详情页幻灯效果中间的大图，也即：要加载的图片      ，此标签是通过js动态创建的，模板文件中原本不存在   
        $("#big-pic").html("<img src='"+url+"' onload='loadpic("+next_picid+")' onclick='showpic(/"next/")' style='cursor:pointer;'>");   
        //自定义要加载图片的宽度为800、高度为650   
        $('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);   
        $("#picnum").html("<span>"+i+"</span> / "+totalnum);   
        $("#picinfo").html($("#pictureurls li:nth-child("+i+") img").attr("alt"));   
        //更新锚点   
        location.hash = i;   
        type = i;   
   
        //点击图片滚动   
        var _w = $('.cont li').width()*$('.cont li').length+200;   
        if(i>2) {   
            movestep = i – 3;   
        } else {   
            movestep = 0;   
        }   
        var _ws = $('.cont li').width()*movestep;   
        $(".cont ul").css({"left":-+_ws});   
   
    } else if(type=='big') {//查看原图   
        //获取锚点即当前图片id   
        var picid = location.hash;   
        picid = picid.substring(1);   
        if(isNaN(picid) || picid=='' || picid==null) {   
            picid = 1;   
        }   
        picid = parseInt(picid);   
   
        url = $("#pictureurls li:nth-child("+picid+") img").attr("rel");   
        window.open(url);   
    } else {//type：数字类型   
        url = $("#pictureurls li:nth-child("+type+") img").attr("rel");   
        $("#big-pic").html("<img src='"+url+"' onclick='showpic(/"next/")' style='cursor:pointer;'>");   
        //自定义要加载图片的宽度为800、高度为650   
        $('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);   
        //如：1/7 – 代表这个图集中有7张图片，当前显示的是第一张图片   
        $("#picnum").html("<span>"+type+"</span> / "+totalnum);   
        //当前图片的描述信息   
        $("#picinfo").html($("#pictureurls li:nth-child("+type+") img").attr("alt"));   
        location.hash = type;   
    }   
   
    $("#pictureurls li").each(function(i){   
        j = i+1;   
        if(j==type) {//当前选中的图片添加样式   
            $("#pictureurls li:nth-child("+j+")").addClass("np");   
        } else {   
            $("#pictureurls li:nth-child("+j+")").removeClass();   
        }  //Cuoxin.com
    });   
}   
   
   
//预加载图片   
function loadpic(id) {   
    url = $("#pictureurls li:nth-child("+id+") img").attr("rel");   
    $("#load_pic").html("<img src='"+url+"'>");   
}