Javascript, 網頁設計

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

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

放在<head>.....</head>之間:
<script type="text/javascript" src="https://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 >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
UAG軍規iPhone防摔殼