前臺頁面圖片切換

SELECT nextval('distributor Priced')做用是ID自增1（知識點）

一 前臺頁面設置圖片自動滾動，

一、在goodsDetail.heml中寫入關鍵代碼:

<div id="tFocus">
	<div class="prev" id="prev"></div>
	<div class="next" id="next"></div>
	<ul id="tFocus-pic">                 下面注意圖片的路徑問題 
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId})}" width="338" height="243" alt="iOS 7.1測試版發佈 新界面和新功能可很多" /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" width="338" height="243" alt="iOS 7.1測試版發佈 到底提高了哪些？  " /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" width="338" height="243" alt="iH8sn0w：iOS 7完美越獄今年或無緣發佈" /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" width="338" height="243" alt="買5s糾結裸機合約機? 明白人幫你理頭緒 " /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" width="338" height="243" alt="帥慘了！國外用戶親自設計概念iPhone 6" /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" width="338" height="243" alt="美創業者用廢棄的iPhone造傢俱和首飾  " /></a></li>
	</ul>
	<div id="tFocusBtn">
		<a href="javascript:void(0);" id="tFocus-leftbtn">上一張</a>
		<div id="tFocus-btn">
			<ul>
				<li class="active">
				<img th:src="@{showImage(pictureId=${goodsForm.pictureId})}" width="87" height="57" alt="iOS 7.1測試版發佈 新界面和新功能可很多" /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" width="87" height="57" alt="iOS 7.1測試版發佈 到底提高了哪些？  " /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" width="87" height="57" alt="iH8sn0w：iOS 7完美越獄今年或無緣發佈" /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" width="87" height="57" alt="買5s糾結裸機合約機? 明白人幫你理頭緒 " /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" width="87" height="57" alt="帥慘了！國外用戶親自設計概念iPhone 6" /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" width="87" height="57" alt="美創業者用廢棄的iPhone造傢俱和首飾  " /></li>
			</ul>
		</div>
		<a href="javascript:void(0);" id="tFocus-rightbtn">下一張</a>
	</div>
</div><!--tFocus end-->

<script type="text/javascript">addLoadEvent(Focus());</script>
</div>

   二、還有文件WebCentent下的CSS文件夾下添加一個style.css文件。用於控制圖片以及滾動的圖片大小，樣式，在GoodsForm.java和GoodsSqlMap.XML中定義添加圖片的ID。

在shop下的css文件夾下的style.css中添加設置樣式的代碼:

.span_2_of_3  h3{          （h3是用來定義標題樣式的）

color:#D54F30;

margin-bottom:0.2em;

padding-left:0.4em;

font-size:2em;

font-weight : normal;

margin-top:0px;

letter-spacing: -1px;            （設置字間距）

}

.span_2_of_3  p  {                   （定義段內樣式）

font-size:0.9em;

padding:0.5em;

padding-left:1.2em;                （距離左邊框的距離）

color: #333;

line-height: 1.6em;                  （定義行間距）

}

三、在數據庫中添加圖片調取數據庫中的查詢項

 commodity.picture1_id as pictureId1,

commodity.picture2_id as pictureId2,

commodity.picture3_id as pictureId3,

commodity.picture4_id as pictureId4,

commodity.picture5_id as pictureId5,

commodity.picture6_id as pictureId6,

四、設置圖片顯示樣式

@charset "utf-8";

/* CSS Reset */

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:18px/180% Arial, Helvetica, sans-serif, "新宋體";}

五、background:#DDD;（設置的是整個圖片區域的背景顏色）

二 將電腦界面換成手機版

在goodsDetail.heml中寫入關鍵代碼:

<div id="tFocus">
	<div class="prev" id="prev"></div>
	<div class="next" id="next"></div>
	<ul id="tFocus-pic">
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId})}" width="338" height="243" alt="iOS 7.1測試版發佈 新界面和新功能可很多" /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" width="338" height="243" alt="iOS 7.1測試版發佈 到底提高了哪些？  " /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" width="338" height="243" alt="iH8sn0w：iOS 7完美越獄今年或無緣發佈" /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" width="338" height="243" alt="買5s糾結裸機合約機? 明白人幫你理頭緒 " /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" width="338" height="243" alt="帥慘了！國外用戶親自設計概念iPhone 6" /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" width="338" height="243" alt="美創業者用廢棄的iPhone造傢俱和首飾  " /></a></li>
	</ul>
	<div id="tFocusBtn">
		<a href="javascript:void(0);" id="tFocus-leftbtn">上一張</a>
		<div id="tFocus-btn">
			<ul>
				<li class="active">
				<img th:src="@{showImage(pictureId=${goodsForm.pictureId})}" width="87" height="57" alt="iOS 7.1測試版發佈 新界面和新功能可很多" /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" width="87" height="57" alt="iOS 7.1測試版發佈 到底提高了哪些？  " /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" width="87" height="57" alt="iH8sn0w：iOS 7完美越獄今年或無緣發佈" /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" width="87" height="57" alt="買5s糾結裸機合約機? 明白人幫你理頭緒 " /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" width="87" height="57" alt="帥慘了！國外用戶親自設計概念iPhone 6" /></li>
				<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" width="87" height="57" alt="美創業者用廢棄的iPhone造傢俱和首飾  " /></li>
			</ul>
		</div>
		<a href="javascript:void(0);" id="tFocus-rightbtn">下一張</a>
	</div>
</div><!--tFocus end-->

<script type="text/javascript">addLoadEvent(Focus());</script></div>

在代碼中添加清除格式代碼<div class="clear"></div>，目的是爲了樣式能適用手機屏幕大小，方法和電腦界面的差很少