1.背景

  寫過一段時間的後臺程式碼，總感覺自己做的介面有些難看。想嘗試著寫一些好看的介面。於是我從基本的css+html+javacript複習起來。嘗試著做一個輪播圖。

2.第一部分

  用HTML寫一個主體的框架。首先用ul列表來存放圖片和描述。接著寫一個div用來標識頁碼，最後寫一對按鈕組，實現點選後，進入下一個圖片。

<div class="slideShow">
	<ul>	
		<li>
			<h2 class="active">橋邊落日</h2>
			<img class="active" src="images/h1.jpg" width="720px" height="540px">
		</li>
		<li>
			<h2>夕陽美圖</h2>
			<img src="images/h2.jpg" width="720px" height="540px" >
		</li>
		<li>
			<h2>湖光波瀾</h2>
			<img src="images/h3.jpg" width="720px" height="540px">
		</li>
		<li>
			<h2>長河落日</h2>
			<img src="images/h4.jpg" width="720px" height="540px">
		</li>
		<li>
			<h2>黃昏</h2>
			<img src="images/h5.jpg" width="720px" height="540px">
		</li>
		<li>
			<h2>鬆</h2>
			<img src="images/h6.jpg" width="720px" height="540px">
		</li>
	</ul>
	<!-- 頁數 -->
	<div class="pageNum">
		<span class="active" name="0"></span><span name="1"></span><span name="2"></span><span name="3"></span><span name="4"></span><span name="5"></span>
	</div>
	<!-- 按鈕組 -->
	<div class="btn">
		<p class="left-btn"></p><!--左按鈕 -->
		<p class="right-btn"></p><!--右按鈕 -->
	</div>
</div>
 

3.第二部分

  寫css樣式。主要來寫：1.圖片部分。2.圖片描述部分。3.頁碼。4.按鈕組。這些的樣式。其中關鍵的一個樣式是transition,主要用它來實現動畫效果。

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	/*輪播圖主體*/
	.slideShow{
		width: 720px;
		height: 580px;
		margin: 30px auto;
		position: relative;
		overflow: hidden;
	}
	/*輪播圖片*/
	.slideShow img{
		position: absolute;
		width: 720px;
		height: 540px;
		left: 720px;
		top: 40px;
		transition: left 0.3s linear;
	}

	.slideShow img.active{
		left: 0px;
	}
	.slideShow img.left{
		left: -720px;
	}
	/*描述*/
	.slideShow h2{
		top: 0px;
		width: 100%;
		position: absolute;
		text-align: center;
		transition: opacity 0.1s linear;
		opacity: 0;
	}
	.slideShow h2.active{
		opacity: 1;
	}

	/*頁碼*/
	.slideShow .pageNum{
		position: absolute;
		bottom: 50px;
		width: 100%;
		text-align: center;
	}
	.slideShow .pageNum span{
		display: inline-block;
		width: 15px;
		height: 10px;
		padding: 3px 0;
		margin: 0 8px;
		border-radius: 15px;
		background: #fff;
		transition: width 0.3s linear;
	}
	.slideShow .pageNum span.active{
		width: 20px;
		background-color:#ff0000 ;
	}

	/*左右按鈕組*/
	.slideShow .btn{
		position: absolute;
		top: 290px;
		width: 100%;
	}

	.slideShow .btn .left-btn{
		position: absolute;
		display: inline-block;
		width: 40px;
		height: 90px;
		left:0px;
		background-color: black;
		opacity: 0.1;
		transition: opacity 0.3s linear;
	}

	.slideShow .btn .right-btn{
		position: absolute;
		display: inline-block;
		width: 40px;
		height: 90px;
		left:680px;
		background-color: black;
		opacity: 0.1;
		transition: opacity 0.3s linear;
	}

	.slideShow .btn .left-btn:hover{
		filter:alpha(opacity=50);  
        -moz-opacity:0.5;  
        -khtml-opacity: 0.5;  
        opacity: 0.5;
	}

	.slideShow .btn .right-btn:hover{
		filter:alpha(opacity=50);  
        -moz-opacity:0.5;  
        -khtml-opacity: 0.5;  
        opacity: 0.5;
	}


</style>
 

4.第三部分。

  寫javascript。其中主要用到的事件有 onmouseover：滑鼠移入事件，onmouseout:滑鼠移出事件，onclick滑鼠點選事件。還有定時器。

<script type="text/javascript">
	// 輪播函式
	function slideShow(){
		var slideShow = document.getElementsByClassName("slideShow")[0],//輪播主體
		pages = slideShow.getElementsByTagName("span"),//頁碼們
		descripes = slideShow.getElementsByTagName("h2"),//描述們
		imgs = slideShow.getElementsByTagName("img"),//圖片們
		leftBtn = slideShow.getElementsByClassName("left-btn")[0],//左按鈕
		rightBtn = slideShow.getElementsByClassName("right-btn")[0],//右按鈕
		length = imgs.length,//圖片數量
		current = 1;//圖片當前的編號、描述的編號、頁碼的編號


		//圖片輪播函式
		function slideChange(){
			for(var i=0;i<length;i++){
				if (i==current) {
					imgs[i].className="active";
					pages[i].className="active";
					descripes[i].className="active";
				}else{
					pages[i].className="";
					descripes[i].className="";
					if (i<current) {
						imgs[i].className="left";
					}else{
						imgs[i].className="";
					}
				}
			}
			current++;
			if (current>=length) {
				current=0;
			}

		}
		//點選按鈕時的圖片輪播函式
		function slideChange2(){
			for(var i=0;i<length;i++){
				if (i==current) {
					imgs[i].className="active";
					pages[i].className="active";
					descripes[i].className="active";
				}else{
					pages[i].className="";
					descripes[i].className="";
					if (i<current) {
						imgs[i].className="left";
					}else{
						imgs[i].className="";
					}
				}
			}
		}

		// 點選左按鈕,圖片變換
		leftBtn.onclick = function(){
			// console.log("左按鈕:"+current);
			if (current<=0) {
				current=length-1;
			}else{
				current--;
			}
			slideChange2();
		}

		// 點選右按鈕，圖片變換
		rightBtn.onclick = function(){
			// console.log("右按鈕:"+current);
			if (current>=length-1) {
				current=0;
			}else{
				current++;
			}
			slideChange2();
		}

		var slideon = setInterval(slideChange,2000);//設定定時器，每2秒輪播一次函式


		slideShow.onmouseover = function(){//滑鼠移入輪播主體，停止輪播
			clearInterval(slideon);
		}

		slideShow.onmouseout = function(){//滑鼠移出輪播主體，啟動輪播
			slideon = setInterval(slideChange,2000);
		}


		for(var i=0;i<length;i++){
			pages[i].onmouseover = function(){
				current = this.getAttribute("name");//當滑鼠指向頁碼時,獲取當前頁面編號
				slideChange();
			}
		}

	}
	slideShow();//執行輪播函式
</script>