js 網頁開發

jQuery教學-SliderGallery滑動式相本特效應用

2009/09/08

梅問題-jQuery教學-SliderGallery滑動式相本特效應用

  今天在場設計的網站中,看到它作品集的呈現方式相當的特別,但它是採用Flash來製作,於是梅干就突然其想,jQuery應該也可辦到,正準備開始動工時,才發現~阿!XD~梅干忘的還真快,於是邊寫邊吵好友男丁,終於如梅干所願的把它給實作出來了, 而這一個範例各位朋友只要自由的新增圖片,並把圖片卡到指定的資料夾下,就可正常的運作了,而該範例為了讓影像品質更優,所以在範例檔案中,各位分別會看到s、o、b等資料夾,而s是放置小方的小圖,o是滑入的縮圖,b則是點了小圖所呈現的大圖,相當的簡便,且呈現效果梅干還蠻喜歡的,各位不仿也可試一試喔~


放在<head>…..</head>之間:
<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js"></script>
<script type=“text/javascript”>
$(function(){
    $(“#prv img”).css({
        display:‘none’
    });
    //設定縮圖的長度
    var total=$(“#list ul li”).length;
    //設定ul的寬度
    var ulWidth=total*61;
    $(“#list ul”).css(“width”,ulWidth);

//計算頁數
var page=0;
var maxpage=Math.floor(ulWidth/360);    
$("#pagenum").html(page+"/"+maxpage);

$("#imgB").css("opacity", 0);
$("#imgB").fadeTo(1000, 1.0);

var ImgObj=$("#list ul li img");
ImgObj.click(function(){
    $("#imgB").css("opacity", 0);
    var img=this.src.replace("img/s","img/b");
    $("#imgB").attr("src",img);

    $("#imgB").stop();
    $("#imgB").fadeTo(1000, 1.0);
    //移除li上的on Class
    ImgObj.parents("li").removeClass("on");
    //將目前點到的加入on Class
    $(this).parents("li").addClass("on");   

    //關閉滑入縮圖
    ImgObj.mouseout();  
});

ImgObj.mouseover(function(e){       
    //取得滑鼠位置
    var mousex=e.pageX;     

    //取出居中的數值
    $("#overImg #Img").attr("src",img);
    var _padding = parseInt($("#overImg").css("padding-left"))
                    + parseInt($("#overImg").css("padding-right"));
    var _border = parseInt($("#overImg").css("border-left-width"))
                        + parseInt($("#overImg").css("border-right-width"));
    var _l = $(this).offset().left - ($("#overImg").width()-_padding-_border) / 2;      

    //將圖片換成滑入的小圖
    var img=this.src.replace("img/s","img/o");

    //overImg滑入圖片居中     
    $("#overImg").css({
        top:220,
        left:_l,
        display:'block'
    });             
    $("#overImg #Img").attr("src",img);     
    $("#overImg").css("opacity", 0);
    $("#overImg").stop();
    $("#overImg").fadeTo(300, 1.0); 
});

ImgObj.mouseout(function(){
    $("#overImg").css({
        top:-999999,
        left:-999999,
        display:'none'
    });     
});

//下一頁
$("#next img").click(function(){
    if(page!=maxpage){
        page++;
        $("#prv img").css({
            display:'block'
        });
    }
    if(page == maxpage){
        $("#next").css({
            display:'none'
        });
    }
    //滾動縮圖
    $("#list ul").animate({left:-300*page},1000);
    $("#pagenum").html(page+"/"+maxpage);
});

//上一頁
$("#prv img").click(function(){
    if(page &gt;0){
        page--;
        $("#next").css({
            display:'block'
        });
    }   
    if(page ==0){
        $("#prv img").css({
            display:'none'
        });
    }
    //滾動縮圖
    $("#list ul").animate({left:-300*page},1000);
    $("#pagenum").html(page+"/"+maxpage);
});

//取消連結虛線框
$("a").focus(function(){
    $(this).blur();
});

}); </script>


放在<style>…..</style>之間:
body{font-family:Arial, Helvetica, sans-serif;}
ul ,li{ margin:0; padding:0; list-style-type: none; float:left;}
#showbox{width:360px; border:solid 1px #eee;}
#showImg , #showImg table{width:360px; height:300px;}

#imgList{margin-top:10px; margin-left:3px; padding-bottom:10px; overflow:auto;}
#imgList span{float:left; display:block; width:22px;  margin:2px; line-height:50px;}

#list{position:relative; float:left; width:350px; height:60px;} 
#list img{width:40px; height:40px;}
#list{width:300px; float:left; margin:0 2px; overflow:hidden;}
#list ul{ position:absolute; left:0; top:0; white-space: nowrap;/* 不斷行 */}
#list ul li{
    display: inline; /* 水平排列 */
    margin:0 4px;
    padding:5px; 
    border:solid 1px #eee;
}
#list ul li.on{border:solid 2px #ccc;}  
#list ul li img {display: inline-block; /* 水平內顯示為區塊 */}

/* 秀大圖 */
#imgB{border:solid 7px #fff;}
/* 滑入顯示圖片區塊 */
#overImg{position:absolute; top:-99999; left:-99999; display:none; z-index:100; border:solid 5px #666; padding:5px; background:#fff;}


放在<body>…..</body>之間:
<div class=“re”>
<b>回應:</b>

</div><div id=“pagenum”></div> <div id=“overImg”> <img src=“img/o/img01.jpg” id=“Img”/><br /> <div align=“center”><img src=“img/arrow.gif” /></div> </div> <div id=“showbox”> <div id=“showImg”> <table border=“0” cellspacing=“0” cellpadding=“0”> <tr> <td align=“center” valign=“middle” bgcolor=“#eeeeee”> <img src=“img/b/img01.jpg” id=“imgB”/></td> </tr> </table> </div> <div id=“imgList”>
<span id=“prv”><a href=“#”><img src=“img/left_arrow.gif” border=“0”/></a></span>
<div id=“list”> <ul> <li class=“on”><img src=“img/s/img01.jpg” /></li> <li><img src=“img/s/img02.jpg” /></li> <li><img src=“img/s/img03.jpg” /></li> <li><img src=“img/s/img04.jpg” /></li> <li><img src=“img/s/img05.jpg” /></li> <li><img src=“img/s/img06.jpg” /></li> <li><img src=“img/s/img07.jpg” /></li> <li><img src=“img/s/img08.jpg” /></li> <li><img src=“img/s/img09.jpg” /></li> <li><img src=“img/s/img10.jpg” /></li> <li><img src=“img/s/img11.jpg” /></li> <li><img src=“img/s/img12.jpg” /></li> <li><img src=“img/s/img13.jpg” /></li> <li><img src=“img/s/img14.jpg” /></li> <li><img src=“img/s/img15.jpg” /></li> </ul> </div> <span id=“next”><a href=“#”><img src=“img/right_arrow.gif” border=“0”/></a></span>
</div> </div>


[範例預覽] [範例下載] ※解壓密碼:minwt.com