当前位置：首页 > CMS教程 > phpcms > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2014-10-20 15:39:17　浏览: 评论：0　

一.phpcms-v9中图集详情页可以改造成如下这种风格:

二、所用到的js文件有statics/js/jquey.sgallery.js文件和statics/js/show_picture.js文件

1.statics/js/jquey.sgallery.js文件分析:

  1. //图集详情页使用       参数1：scaling-是否自动缩放图像                参数2：width-自定义宽度              参数3：height-自定义高度             参数4：loadpic-要加载的原始图片   
  2. jQuery.fn.LoadImage=function(scaling,width,height,loadpic,call_back){   
  3.     //加载中...图片   
  4.     if(loadpic==null)loadpic="../images/msg_img/loading.gif";   
  5.    return this.each(function(){   
  6.        //t-当前要加载图片的<img src="">对象   
  7.        var t=$(this);   
  8.        //当前要加载图片的<img>标签的src属性值，即：原图的src属性值   
  9.        var src=$(this).attr("src");   
  10.        //创建一个图像对象   
  11.        var img=new Image();   
  12.        //将原图的src属性值赋值给新创建的img对象   
  13.        img.src=src;   
  14.        //自动缩放图片   
  15.        var autoScaling=function(){   
  16.         //scaling-是否自动缩放图像   
  17.         if(scaling){   
  18.              //首先要保证要加载的图像的宽度和高度都大于零   
  19.              if(img.width>0 && img.height>0){    
  20.                    //缩放比率：  要加载图片的宽度/要加载图片的高度            >    自定义宽度 /自定义高度   
  21.                    if(img.width/img.height>=width/height){    
  22.                            //要加载图片的宽度       >  自定义宽度   
  23.                            if(img.width>width){    
  24.                                //将自定义宽度作为要加载图片的宽度，也就是要加载图片的宽度被缩小了   
  25.                                t.width(width);   
  26.                                //要加载图片的高度也做相应的处理   
  27.                                t.height((img.height*width)/img.width);    
  28.                            }else{//要加载图片的宽度     <     自定义宽度  的情况    
  29.                                t.width(img.width);//将要加载图片的宽度设置为自定义的宽度    
  30.                                t.height(img.height);//将要加载图片的高度设置为自定义的高度   
  31.                            }    
  32.                    } else{    
  33.                            if(img.height>height){    
  34.                                t.height(height);    
  35.                                t.width((img.width*height)/img.height);    
  36.                            }else{    
  37.                                t.width(img.width);    
  38.                                t.height(img.height);    
  39.                            }    
  40.                    }    
  41.                }   
  42.         }   
  43.         //参数5：call_back-回调函数，在这里是show_picture.js中的load_images函数   
  44.         //等价于load_images(t.height());   
  45.         //t.height()-图片被处理后的最终高度   
  46.         call_back(t.height());   
  47.    }   

2.statics/js/show_picture.js文件分析:

  1. $(document).ready(function(){   
  2.     //获取锚点即当前图片id   
  3.     //如：会获取到index.php?m=content&c=index&a=show&catid=71&id=2#3中的#3   
  4.     var picid = location.hash;   
  5.     //将#截取掉，得到当前切换到的图片id：3   
  6.     picid = picid.substring(1);   
  7.     if(isNaN(picid) || picid=='' || picid==null) {   
  8.         //如果图片id不存在，则设置为第一张图片的id   
  9.         picid = 1;   
  10.     }   
  11.     picid = parseInt(picid);   
  12.     //图集图片总数   
  13.     var totalnum = $("#pictureurls li").length;   
  14.     //如果当前图片id大于图片数，显示第一张图片   
  15.     if(picid > totalnum || picid < 1) {   
  16.         picid = 1;   
  17.         next_picid = 1; //下一张图片id   
  18.     } else {   
  19.         //否则显示下一张图片id   
  20.         next_picid = picid + 1;   
  21.     }   
  22.     //要加载的原图的url地址：通过dom来获取模板中当前标签的rel属性的值   
  23.     url = $("#pictureurls li:nth-child("+picid+") img").attr("rel");   
  24.     //图集详情页幻灯效果中间的大图，也即：要加载的图片      ，此标签是通过js动态创建的，模板文件中原本不存在   
  25.     $("#big-pic").html("<img src='"+url+"' onload='loadpic("+next_picid+")' onclick='showpic(\"next\")' style='cursor:pointer;'>");   
  26.     //自定义要加载图片的宽度为800、高度为650   
  27.     $('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);   
  28.     //如：1/7 - 代表这个图集中有7张图片，当前显示的是第一张图片   
  29.     $("#picnum").html("<span>"+picid+"</span> / "+totalnum);   
  30.     //当前图片的描述信息   
  31.     $("#picinfo").html($("#pictureurls li:nth-child("+picid+") img").attr("alt"));   
  32.     //大图中间的提示信息   
  33.     $("#futitle").fadeIn(3000,function(){   
  34.         $("#futitle").fadeOut(4000);   
  35.     });   
  36.     //切换到对应的图片   
  37.     $("#pictureurls li").click(function(){   
  38.         i = $(this).index() + 1;   
  39.         showpic(i);//显示图片   
  40.     });   
  41.    
  42.     //加载时图片滚动到中间：获取所有<li>元素的总宽度   
  43.     var _w = $('.cont li').width()*$('.cont li').length;   
  44.     if(picid>2) {   
  45.         //移动步长   
  46.         movestep = picid - 3;   
  47.     } else {   
  48.         movestep = 0;   
  49.     }   
  50.     var _ws = $('.cont li').width()*movestep;   
  51.     //通过css样式来控制左移位置   
  52.     $(".cont ul").css({"left":-+_ws});   
  53.    
  54.     //点击图片滚动   
  55.     $('.cont ul').width(_w+200);   
  56.     $(".cont li").click( function () {   
  57.         if($(this).index()>2){   
  58.             movestep = $(this).index() - 2;   
  59.             $(".cont ul").css({"left":-+$('.cont li').width()*movestep});   
  60.         }   
  61.     });   
  62.     //当前缩略图添加样式   
  63.     $("#pictureurls li:nth-child("+picid+")").addClass("np");   
  64.    
  65. });   
  66.    
  67.    
  68. //通过键盘的左右键控制图集详情页的幻灯片切换   
  69. $(document).keyup(function(e) {        
  70.     var currKey=0,e=e||event;   
  71.     currKey=e.keyCode||e.which||e.charCode;   
  72.     switch(currKey) {        
  73.         case 37: // left：切换到上一张图片   
  74.             showpic('pre');   
  75.             break;   
  76.         case 39: // up：切换到下一张图片   
  77.             showpic('next');   
  78.             break;   
  79.         case 13: // enter：切换图集   
  80.             var nextpicurl = $('#next_thumb').attr('href');//获取下一个图集的url地址   
  81.             if(nextpicurl !== '' || nextpicurl !== 'null') {   
  82.                 window.location=nextpicurl;//直接跳转到下一图集   
  83.             }   
  84.             break;   
  85.     }      
  86. });   
  87.    
  88. //图集详情页会使用到此函数：设置要加载图片的高度   
  89. function load_images(height) {   
  90.     var _h = $("#big-pic img").css("height");   
  91.     $(".tjxx_img").height(_h);   
  92. }   
  93.    
  94.    
  95. //type : next-下一张      pre-上一张     replay：是否重播   
  96. function showpic(type, replay) {   
  97.     //隐藏重复播放div   
  98.     //$("#endSelect").hide();   
  99.    
  100.     //图集图片总数   
  101.     var totalnum = $("#pictureurls li").length;   
  102.     if(type=='next' || type=='pre') {   
  103.         //获取锚点即当前图片id   
  104.         //如：会获取到index.php?m=content&c=index&a=show&catid=71&id=2#3中的#3   
  105.         var picid = location.hash;//#3   
  106.         picid = picid.substring(1);//3   
  107.         if(isNaN(picid) || picid=='' || picid==null) {   
  108.             picid = 1;   
  109.         }   
  110.         //当前图片id   
  111.         picid = parseInt(picid);   
  112.         //下一张   
  113.         if(type=='next') {   
  114.             i = picid + 1;//当前图片id加1   
  115.             //如果是最后一张图片，指针指向第一张   
  116.             if(i > totalnum) {   
  117.                 //如果当前是最后一张图片，提示最后一页   
  118.                 var next_url = $("#next_thumb").attr('href');   
  119.                 if(next_url!=''){   
  120.                     window.location.href = next_url;//提示最后一张   
  121.                     return false;   
  122.                 }   
  123.                 i=1;//如果是最后一张图片，指针指向第一张   
  124.                 next_picid=1;//下一张图片id重置为1   
  125.                 //重新播放   
  126.                 if(replay!=1) {   
  127.                     return false;   
  128.                 }   
  129.             } else {   
  130.                 //下一张图片id   
  131.                 next_picid = parseInt(i) + 1;   
  132.             }   
  133.         } else if (type=='pre') {   
  134.             i = picid - 1;//当前图片id减1   
  135.             //如果是第一张图片，指针指向最后一张   
  136.             if(i < 1) {   
  137.                 i=totalnum;//如果是第一张图片，指针指向最后一张   
  138.                 next_picid = totalnum;   
  139.             } else {   
  140.                 next_picid = parseInt(i) - 1;   
  141.             }   
  142.         }   
  143.            
  144.         //当前选中的图片的url   
  145.         url = $("#pictureurls li:nth-child("+i+") img").attr("rel");   
  146.         //图集详情页幻灯效果中间的大图，也即：要加载的图片      ，此标签是通过js动态创建的，模板文件中原本不存在   
  147.         $("#big-pic").html("<img src='"+url+"' onload='loadpic("+next_picid+")' onclick='showpic(\"next\")' style='cursor:pointer;'>");   
  148.         //自定义要加载图片的宽度为800、高度为650   
  149.         $('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);   
  150.         $("#picnum").html("<span>"+i+"</span> / "+totalnum);   
  151.         $("#picinfo").html($("#pictureurls li:nth-child("+i+") img").attr("alt"));   
  152.         //更新锚点   
  153.         location.hash = i;   
  154.         type = i;   
  155.    
  156.         //点击图片滚动   
  157.         var _w = $('.cont li').width()*$('.cont li').length+200;   
  158.         if(i>2) {   
  159.             movestep = i - 3;   
  160.         } else {   
  161.             movestep = 0;   
  162.         }   
  163.         var _ws = $('.cont li').width()*movestep;   
  164.         $(".cont ul").css({"left":-+_ws});   
  165.    
  166.     } else if(type=='big') {//查看原图   
  167.         //获取锚点即当前图片id   
  168.         var picid = location.hash;   
  169.         picid = picid.substring(1);   
  170.         if(isNaN(picid) || picid=='' || picid==null) {   
  171.             picid = 1;   
  172.         }   
  173.         picid = parseInt(picid);   
  174.    
  175.         url = $("#pictureurls li:nth-child("+picid+") img").attr("rel");   
  176.         window.open(url);   
  177.     } else {//type：数字类型   
  178.         url = $("#pictureurls li:nth-child("+type+") img").attr("rel");   
  179.         $("#big-pic").html("<img src='"+url+"' onclick='showpic(\"next\")' style='cursor:pointer;'>");   
  180.         //自定义要加载图片的宽度为800、高度为650   
  181.         $('#big-pic img').LoadImage(true, 800, 650,$("#load_pic").attr('rel'),load_images);   
  182.         //如：1/7 - 代表这个图集中有7张图片，当前显示的是第一张图片   
  183.         $("#picnum").html("<span>"+type+"</span> / "+totalnum);   
  184.         //当前图片的描述信息   
  185.         $("#picinfo").html($("#pictureurls li:nth-child("+type+") img").attr("alt"));   
  186.         location.hash = type;   
  187.     }   
  188.    
  189.     $("#pictureurls li").each(function(i){   
  190.         j = i+1;   
  191.         if(j==type) {//当前选中的图片添加样式   
  192.             $("#pictureurls li:nth-child("+j+")").addClass("np");   
  193.         } else {   
  194.             $("#pictureurls li:nth-child("+j+")").removeClass();   
  195.         }  //phpfensi.com 
  196.     });   
  197. }   
  198.    
  199.    
  200. //预加载图片   
  201. function loadpic(id) {   
  202.     url = $("#pictureurls li:nth-child("+id+") img").attr("rel");   
  203.     $("#load_pic").html("<img src='"+url+"'>");   
  204. }

Tags: phpcms图集详情页 phpcms幻灯片

分享到：

相关文章

推荐文章

热门文章

最新评论文章