phpcms-v9中圖集詳情頁幻燈片特效的js代碼分析

2024-09-10 07:15:12

字體：大中小

來源：轉載

供稿：網友

一.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(""+picid+" / "+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(""+i+" / "+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(""+type+" / "+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();

 } //Vevb.com

 });

}





//預加載圖片

function loadpic(id) {

 url = $("#pictureurls li:nth-child("+id+") img").attr("rel");

 $("#load_pic").html("<img src='"+url+"'>");

}