好久沒有發部落格了，最近都在複習，為了找工作做準備。

前段時間逛了下鼠繪漫畫網追海賊王最新漫畫，發現他們家的圖片輪播效果跟其他網頁的圖片輪播效果效果不同，看起來更加有趣，於是我嘗試了用js複寫它。

前提提要：想要讀懂這篇文章最好要懂css的定位position，簡單js技術。

先看效果：

原諒我沒有做個動態gif，反正讀者只要知道他是做什麼的就好。（當我滑鼠滑動到任意一張圖片，其他圖片就要滑動開，讓這張圖片完全顯示出來。）若讀者想檢視具體效果：可以點選這裡訪問。

讓我們先上程式碼再進行講解：

簡單的html:

<div class="imgs">
	<img class="img1" src="img/i1.jpg" _xhe_src="img/i1.jpg">
	<img class="img2" src="img/i2.jpg" _xhe_src="img/i2.jpg">
	<img class="img3" src="img/i3.jpg" _xhe_src="img/i3.jpg">
	<img class="img4" src="img/i4.jpg" _xhe_src="img/i4.jpg">
	<img class="img5" src="img/i5.jpg" _xhe_src="img/i5.jpg">
	<ul>
		<li><button></button></li>
		<li><button></button></li>
		<li><button></button></li>
		<li><button></button></li>
		<li><button></button></li>
	</ul>
	<div id="zuo"><input type="button"></div>
	<div id="you"><input type="button"></div>
</div>
 

簡單的css:

.imgs{
	width: 1000px;
	height: 300px;
	margin: 100px auto;
	border: 1px #999999 solid;
	overflow: hidden;
	position: relative;
}

.imgs img{
	width: 50%;
	height: 100%;
	transition:left 0.3s;
	position: absolute;
}

.imgs ul{
	width: 100px;
	position: absolute;
	right: 50px;
	bottom: 20px;
	z-index: 100;/*將其置於頂層*/
}

.imgs ul li{
	float: left;
	list-style: none;
}

.imgs ul li button{
	height: 13px;
	margin-left: 3px;
	border-radius: 50%;
	border: none;
}

#zuo,#you{
	width: 30px;
	height: 50px;
	position: absolute;
	top: 125px;
	z-index: 100;/*將其置於頂層*/
	border: none;
	filter:alpha(Opacity=80);
	-moz-opacity:0.5;
	opacity: 0.5;
	background-color: #B2B2B2;
}

#zuo{
	left: 5px;
}

#you{
	right: 5px;
}

#zuo input,#you input{
	width: 20px;
	height: 20px;
	position: relative;
	top: 15px;
	left: 5px;
	border: none;
	background-size: contain;/*使圖片充滿*/
	filter:alpha(Opacity=80);
	-moz-opacity:0.5;
	opacity: 0.5;
	background-color: #B2B2B2;
}

#zuo input{
	background-image: url(../img/zuo.png);
}

#you input{
	background-image: url(../img/you.png);
}
 

for(var i=0;i<document.getElementsByTagName("img").length;i++){
	document.getElementsByTagName("img")[i].style.zIndex = i;
	document.getElementsByTagName("img")[i].style.left = i*12.5+"%";
}//圖片初始化賦予狀態

var t;//Time
var state = 0;

hover(0);//自動輪播開關

//主方法
function hover(onHover){
	
	clearTimeout(t);//清除Time,防止多次點選引起混亂
	
	document.getElementsByTagName("button")[onHover].style.backgroundColor = "chocolate";//這用來控制按鈕顏色改變
	
	//對每個滑鼠懸浮物件的所有其他圖片進行left改變
	for(var i=0;ionHover){
				img.style.left = 12.5*i+37.5+"%";//這是當我們滑鼠經過圖片，他右邊的圖片應該到達右邊狀態
		}else if(i<=onHover){
				img.style.left = i*12.5+"%";//這是當我們滑鼠經過圖片，他左邊的圖片應該回到初始狀態
		}
		
		if(i!=onHover){
				document.getElementsByTagName("button")[i].style.backgroundColor = "#ffffff";
		}
	}
	
	state = onHover;//儲存當前狀態
	
	//用來控制自動輪播
	onHover++;
	if(onHover==document.getElementsByTagName("img").length){
		onHover=0;
	}
	
	
	t = setTimeout("hover("+onHover+")",2000);//每隔2s自動下一個
}

//點選下一個上一個
function next_hover(right){
	var onHover = state;
	if(right){
		if(state==document.getElementsByTagName("img").length-1){//進行狀態判斷，若為最後一個，下一個為第一個
			onHover=0;
		}else{
			onHover++;
		}
	}else{
		if(state==0){//進行狀態判斷，若為第一個，下一個為最一個
			onHover=document.getElementsByTagName("img").length-1;
		}else{
			onHover--;
		}
	}
	hover(onHover);
}
 

設計思路：

其實這個動畫看著很酷炫，但是實現思路還是蠻簡單的。

每一張圖片都只有兩種狀態：1完全顯示。2收起來。

圖片通過css屬性z-index來實現摺疊狀態。而滑鼠懸浮事件則通過js來控制圖片left的值實現動畫效果。

當我滑過圖片時，我需要進行遍歷所有圖片，當在圖片右邊的會向右滑動，在左邊的回到左邊。

//對每個滑鼠懸浮物件的所有其他圖片進行left改變
	for(var i=0;i<document.getElementsByTagName("img").length;i++){
		var img = document.getElementsByTagName("img")[i];
		if(i>onHover){
				img.style.left = 12.5*i+37.5+"%";//這是當我們滑鼠經過圖片，他右邊的圖片應該到達右邊狀態
		}else if(i<=onHover){
				img.style.left = i*12.5+"%";//這是當我們滑鼠經過圖片，他左邊的圖片應該回到初始狀態
		}
		
		if(i!=onHover){
				document.getElementsByTagName("button")[i].style.backgroundColor = "#ffffff";
		}
	}

//用來控制自動輪播
	onHover++;
	if(onHover==document.getElementsByTagName("img").length){
		onHover=0;
	}
	
	
	t = setTimeout("hover("+onHover+")",2000);//每隔2s自動下一個

圖片滑動效果主要運用了css的transition屬性，若有興趣，可以去w3c看看，我就不廢話了。

這就是這次做的大致效果，若讀者發現有任何錯誤或者疑問歡迎討論。謝謝大家。