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

一.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.         }  //Vevb.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. }