【手把手】JavaWeb 入門級項目實戰 -- 文章發布系統 （第三節）

3.6.6 輪播圖的基本實現

上一節中，輪播圖已經做了一大半，我今天上午抽空把剩下的代碼寫完了。現在就大概說一下思路吧。
實現上一張和下一張的效果，基本上就是改變ul的margin-left值。為了保證無縫滾動，我們需要在5張圖片的首部和尾部各加一張圖片。像這樣：

<ul>
	<li class='fl'>
		<a href="javascript:void(0)">
			 <img src="5.jpg "/>
		</a>
	</li>
	<li class='fl'>
		<a href="javascript:void(0)">
			 <img src="1.jpg "/>
		</a>
	</li>
	<li class='fl'>
		<a href="javascript:void(0)">
			 <img src="2.jpg "/>
		</a>
	</li>
	<li class='fl'>
		<a href="javascript:void(0)">
			 <img src="3.jpg "/>
		</a>
	</li>
	<li class='fl'>
		<a href="javascript:void(0)">
			 <img src="4.jpg "/>
		</a>
	</li>
	<li class='fl'>
		<a href="javascript:void(0)">
			 <img src="5.jpg "/>
		</a>
	</li>
	<li class='fl'>
		<a href="javascript:void(0)">
			 <img src="1.jpg "/>
		</a>
	</li>
</ul>

接下來，編寫移動圖片的方法，為了控制下一張和上一張，我們定義一個索引變量index就可以啦。

var index = 0;

獲取圖片的寬度的數量

var imgwidth = $('.banner .content ul li').width(); //獲取輪播圖片的寬度
var len =  $('.banner .content ul li').length - 2//獲取總共的圖片數量

移動圖片的方法

function movePicture(){
	$('.banner .content ul').animate({'margin-left':-imgwidth * (index+1)},1000,function(){
		if(index == len){
			$(this).css('masrgin-left',-imgwidth);
			index = 0;
		}
		if(index == -1){
			$(this).css('margin-left',-imgwidth * len);
			index = len - 1;
		}
	});
}

最后，給按鈕綁定事件：

rightBtn.on('click',function(){
	index ++;
	movePicture();
});

leftBtn.on('click',function(){
	index --;
	movePicture();
});

3.6.7 按鈕的節流控制

接下來要做一個簡單的前台節流，意思就是說，如果有用戶閑得無聊，在那拼命的點擊下一張的按鈕，那么每一次點擊都會觸發movePicture函數，這個時候，你就會看到圖片在那亂跳。

所以，為了避免這種用戶的操作，我們需要用js來做一個節流，額，好像是叫節流。我記不太清了。意思就是說，比如你在一秒鍾內連續點擊了8次，那么我就認為這8次中只有1次是有效的，其他的點擊都是誤操作。

這樣的話，無論你怎么狂點鼠標，我都只調用一次movePicture函數。

首先，我們定義一個空的定時器。

var timer = null; 

思路為：
每當我觸發按鈕的點擊事件，就把當前的定時器timer清零，然后又馬上給他設置定時內容，比如500毫秒后才進行移動操作。也就是說，如果你狂點鼠標，那么定時器就會被馬上清零，然后進入定時器的等待狀態。必須要等你滿了500毫秒，才進行下面的操作。

原理就是這么簡單，這個方式也經常用於登陸按鈕上。比如，當你網速很慢的時候，點擊登陸，網頁沒有立即給你跳轉頁面。有些用戶閑着無聊，就在那狂點鼠標，不知道你有沒有這么做過呢？

如果沒有做好節流，那么就會有大量的請求傳遞到服務器，會給服務器造成很大的壓力。

差不多就是這個意思，上代碼：

rightBtn.on('click',function(){
	clearTimeout(timer); //定時器清零
	timer = setTimeout(function(){
		index ++;
		movePicture();
	},500);
	
});

leftBtn.on('click',function(){
	clearTimeout(timer); //定時器清零
	timer = setTimeout(function(){
		index --;
		movePicture();
	},500);
});

不論我鼠標怎么狂點，它每次都只移動一張圖片。

好了，輪播圖差不多就聊到這里吧，你可以自己去慢慢完善，時間關系我就不擴展太多了。剩下的就交給你自己去玩耍了，比如，我能不能做一個定時輪播呢，每個5秒鍾就自動切換到下一張。

我就不寫了。

3.6.8 整合資源文件

現在，我們把這個已經做好的banner區域搬到項目里。

在WebContent目錄下新增一個static文件夾，這里存放各種靜態資源文件。

比如img，js，css等

因為剛才的頁面中用到了百度資源庫里的jQuery文件：

http://libs.baidu.com/jquery/2.0.0/jquery.min.js

現在我們直接將這個url用瀏覽器打開。

全部復制。

然后在js文件夾中新建一個jQuery.js文件。

現在，將剛才復制的內容原封不動地拷貝進去。

ctrl + s 保存。

OK，jQuery文件已經有了，接下來，我們將素材圖片拷貝到img文件夾中。這樣，資源文件就全部准備好了。

3.6.7 引用資源文件

在整合好資源文件后，如何將這些資源文件導入我們的index.jsp呢？這是一個問題。

我們將html代碼和css樣式拷貝到index.jsp中，看看效果。

圖片都沒有顯示出來。

那么，如何改變img的src，使他能夠成功引到/Article/WebContent/static/img 里面的圖片呢？

我提供一種比較方便的辦法，就是在jsp頁面中寫Java代碼，讓Java來獲取項目的根路徑，然后通過絕對路徑的方式引入資源文件。

我們在jsp頁面的開頭加上以下代碼：

<%
	String path = request.getContextPath();
	int port = request.getServerPort();
	String basePath  = null;
	if(port==80){
		basePath = request.getScheme()+"://"+request.getServerName()+path;
	}else{
		basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
	}
	request.setAttribute("basePath", basePath);
%>

request就是所謂的JSP九大隱式對象中的一員，其實JSP就是Servlet，你可能學過Servlet，那么應該很清楚request是什么意思。以后我會單獨來講解一下關於JSP的東西，現在先繼續往下說吧。

request.setAttribute("basePath", basePath) 表示將得到的basePath（項目根路徑）存放到request作用域中，你可以把request看做一個HashMap，或者一個JSON對象，都可以。

反正，這句話一寫，就說明request作用域中已經有了basePath，我們在JSP頁面的其他地方就可以獲取到了。

<div class="banner">
	<div class='content'>
		<ul>
			<li class='fl'>
				<a href="javascript:void(0)">
					<img src="${basePath}/static/img/5.jpg "/>
				</a>
			</li>
			<li class='fl'>
				<a href="javascript:void(0)">
					<img src="${basePath}/static/img/1.jpg "/>
				</a>
			</li>
			<li class='fl'>
				<a href="javascript:void(0)">
					<img src="${basePath}/static/img/2.jpg "/>
				</a>
			</li>
			<li class='fl'>
				<a href="javascript:void(0)">
					<img src="${basePath}/static/img/3.jpg "/>
				</a>
			</li>
			<li class='fl'>
				<a href="javascript:void(0)">
					<img src="${basePath}/static/img/4.jpg "/>
				</a>
			</li>
			<li class='fl'>
				<a href="javascript:void(0)">
					<img src="${basePath}/static/img/5.jpg "/>
				</a>
			</li>
			<li class='fl'>
				<a href="javascript:void(0)">
					<img src="${basePath}/static/img/1.jpg "/>
				</a>
			</li>
		</ul>
		
		<span class='banner_left'><i class='btn_left'></i></span>
		<span class='banner_right'><i class='btn_right'></i></span>
</div>

這樣就能訪問到了。

剛才還忘了一樣東西，就是左右按鈕的圖片，也把它拷貝進來。

引入

.btn_left ,.btn_right{
	display: inline-block;
	width: 21px;
	height: 150px;
	background: url(${basePath}/static/img/banner_tb.png) no-repeat;
	position: absolute;
	left: -38px;
	top: 90px;
	opacity: 0;
	transition: all ease 0.6s;
	cursor: pointer;
}

順便把banner圖往上一點：

.banner {
	height: 400px;
    margin-top: 2px;
    overflow: hidden;
}

把js代碼也全部拷貝過來吧。

var leftBtn = $('.btn_left').eq(0); //左按鈕
var rightBtn = $('.btn_right').eq(0);//右按鈕

var ul = $('.banner .content ul').eq(0); 

var index = 0;
var timer = null; 

var imgwidth = $('.banner .content ul li').width(); //獲取輪播圖片的寬度
var len =  $('.banner .content ul li').length - 2//獲取總共的圖片數量

rightBtn.on('click',function(){
	clearTimeout(timer); //定時器清零
	timer = setTimeout(function(){
		index ++;
		movePicture();
	},500);
	
});

leftBtn.on('click',function(){
	clearTimeout(timer); //定時器清零
	timer = setTimeout(function(){
		index --;
		movePicture();
	},500);
});
		

function movePicture(){
	
	$('.banner .content ul').animate({'margin-left':-imgwidth * (index+1)},1000,function(){
		if(index == len){
			$(this).css('masrgin-left',-imgwidth);
			index = 0;
		}
		if(index == -1){
			$(this).css('margin-left',-imgwidth * len);
			index = len - 1;
		}
	});
}

發現一個小BUG，當我一直點擊下一張，移動到最后一張圖片的時候（也就是第一張圖片，因為我們在末尾加上了第一張圖片），第二張圖片（有的蘋果那張）沒有自動銜接上去。

這是咋回事呢？

有BUG不要怕，去找原因就行了。

經過檢查，我發現了一個單詞的拼寫錯誤：

原來是margin-left寫錯了。

OK，更正后就正確了，我順便把demo頁面也改好了。

function movePicture(){
	
	$('.banner .content ul').animate({'margin-left':-imgwidth * (index+1)},1000,function(){
		if(index == len){
			$(this).css('margin-left',-imgwidth);
			index = 0;
		}
		if(index == -1){
			$(this).css('margin-left',-imgwidth * len);
			index = len - 1;
		}
	});
}

改正就行了，額，小細節不要在意。。。

banner圖這樣就差不多了，下一節開始做登陸功能。我先把頁面畫好，以后頁面的繪制我就不介紹得這么詳細了，重點還是以Java為主。

免責聲明： 博客中所有的圖片素材均來自百度搜索，僅供學習交流，如有問題請聯系我，侵立刪，謝謝。