開始之前，我就喜歡先看一下效果：

先看Html程式碼：

<divid="photoShow">
   <divclass="photo">
       <imgsrc="p1.jpg"/>
       <span>張娜拉，韓國的</span>
   </div>
   

<divclass="photo">
       <imgsrc="p2.jpg"/>
       <span>My Digital Story</span>
   </div>
   <divclass="photo">
       <imgsrc="p3.jpg"/>
       <span>不知道是什麼圖來的</span>
   </div>
   <divclass="photo">
       <imgsrc="p4.jpg"/>
       <span>

我的Logo，Studio拼錯了都不知道，汗一個。</span>
   </div>
   <divclass="photo">
       <imgsrc="p5.jpg"/>
       <span>四季圖吧這是，但我分不清夏和秋</span>
   </div>
   </div>
</div>

然後我們寫一個CSS來控制一下這個HTML的樣式,CSS比較菜，將就吧，達到效果就好：

css程式碼：

#photoShow{
    border: solid 1px #C5E88E;
    overflow

: hidden;/*圖片超出DIV的部分不顯示*/
    width: 580px;
    height: 169px;
    background: #C5E88E;
    position: absolute;
}
.photo{
    position: absolute;
    top: 0px;
    width: 490px;
    height: 169px;
}
.photo img{
    width: 490px;
    height: 169px;
}
.photo span{
    padding: 5px 0px 0px 5px;
    width: 490px;
    height: 30px;
    position: absolute;
    left: 0px;
    bottom: -32px;/*介紹內容開始的時候不顯示*/
    background: black;
    filter: alpha(opacity=50);/*IE透明*/
    opacity: 0.5;/*FF透明*/
    color: #FFFFFF;
}

完成上面的準備工作後，我們下面開始jQuery程式碼。
首先就是做一些初始化的工作：

$(document).ready(function(){
	var imgDivs = $("#photoShow>div");
	var imgNums = imgDivs.length; //圖片數量
	var divWidth = parseInt($("#photoShow").css("width")); //顯示寬度
	var imgWidth = parseInt($(".photo>img").css("width")); //圖片寬度
	var minWidth = (divWidth - imgWidth)/(imgNums-1); //顯示其中一張圖片時其他圖片的顯示寬度
	var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //圖片介紹資訊的高度
	imgDivs.each(function(i){
		$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)});
		$(imgDivs[i]).hover(function(){
			//處理滑鼠進入的時候
		},function(){
			//處理滑鼠離開的時候
		});
	});
});

首先我們定義了一些變數，方便我們後面使用。

然後就是使用了一個 each() 的函式在每一個匹配的元素進行事件處理。這裡是每一個<div class="photo"> 元素分別進行事件的處理。

然後看一下下面這一句：

$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums), "top":"0px"});

這句是通過CSS來控制每一個圖片的層次和顯示位置。

然後就是用一個 hover() 函式來處理滑鼠的hover事件。

首先看一下滑鼠進入圖片的時候該怎麼處理：

$(imgDivs[i]).hover(function(){
	//$(this).find("img").css("opacity","1");
	$(this).find("span").stop().animate({bottom: 0}, "slow");
	imgDivs.each(function(j){
		if(j<=i){
			$(imgDivs[j]).stop().animate({left: j*minWidth}, "slow");
		}else{
			$(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow");
		}
	});
},function(){
	//處理滑鼠離開時候的事件
});

在這裡所有的動畫效果都是通過 animate() 函式修改CSS來控制元素的顯示位置來實現的。

這裡注意一下就是在呼叫 animate() 函式前都呼叫了 stop() 函式。stop() 函式是用來停止當前元素的所有執行中的事件。

j<=i 的判斷就是判斷滑鼠hover的當前圖片和該圖片前面的圖片與該圖片後面的圖片的分割線。

滑鼠離開的處理也差不多，下面之完整的程式碼：

$(document).ready(function(){
	var imgDivs = $("#photoShow>div");
	var imgNums = imgDivs.length; //圖片數量
	var divWidth = parseInt($("#photoShow").css("width")); //顯示寬度
	var imgWidth = parseInt($(".photo>img").css("width")); //圖片寬度
	var minWidth = (divWidth - imgWidth)/(imgNums-1); //顯示其中一張圖片時其他圖片的顯示寬度
	var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //圖片介紹資訊的高度
	imgDivs.each(function(i){
		$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)});
		$(imgDivs[i]).hover(function(){
			//$(this).find("img").css("opacity","1");
			$(this).find("span").stop().animate({bottom: 0}, "slow");
			imgDivs.each(function(j){
				if(j<=i){
					$(imgDivs[j]).stop().animate({left: j*minWidth}, "slow");
				}else{
					$(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow");
				}
			});
		},function(){
			imgDivs.each(function(k){
				//$(this).find("img").css("opacity","0.7");
				$(this).find("span").stop().animate({bottom: -spanHeight}, "slow");
				$(imgDivs[k]).stop().animate({left: k*(divWidth/imgNums)}, "slow");
			});
		});
	});
});

 
本人水平一般，程式碼還有待改善。