圖片切換

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:1em;

padding:0.3em;

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

color: #333;

line-height: 1.4em;                                                                               ------------定義行間距

}

設置圖片切換

<form action="addCart" th:object="${goodsForm}" method="post">
<input type="hidden" name="commodityId" value="" th:value="${goodsForm.commodityId}" />
 <div class="about-top">
   <table>
	<tr>
	<td>
	<div class="grid images_3_of_1">
	<div id="tFocus">
	<div class="prev" id="prev"></div>
	<div class="next" id="next"></div>
	<ul id="tFocus-pic">
	        <li><img th:src="@{showImage(pictureId=${goodsForm.pictureId})}" width="338" height="243" alt="商品詳細狀況" /></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" width="338" height="243" alt="商品詳細狀況  " /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" width="338" height="243" alt="商品詳細狀況" /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" width="338" height="243" alt="商品詳細狀況 " /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" width="338" height="243" alt="商品詳細狀況" /></a></li>
		<li><a href="#"><img th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" width="338" height="243" alt="商品詳細狀況" /></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="商品詳細狀況" /></li>
		  <li><img th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" width="87" height="57" alt="商品詳細狀況  " /></li>
		<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" width="87" height="57" alt="商品詳細狀況" /></li>
		<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" width="87" height="57" alt="商品詳細狀況 " /></li>
		<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" width="87" height="57" alt="商品詳細狀況" /></li>
		<li><img th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" width="87" height="57" alt="商品詳細狀況" /></li>
	</ul>
	</div>
	<a href="javascript:void(0);" id="tFocus-rightbtn">下一張</a>
	</div>
	</div><!--tFocus end-->
        <script type="text/javascript">addLoadEvent(Focus());</script>
	</div>
</td>

<td>
        <div class="grid span_2_of_3">
	<h3 th:text="${goodsForm.commodityName}"></h3>
		<p>
		品牌：<span th:text="${goodsForm.brandName}"></span>
		</p>
		<p>
		經銷商：<span th:text="${goodsForm.supplierName}"></span>				        </p>
		<p>
		規格：每<span th:text="${#strings.concat(goodsForm.unit).concat(goodsForm.specifications)}"></span>
		</p>
		<p>
		零售價：<span th:text="${goodsForm.retailPrice}"></span>元
		</p>
		<p>
	        庫存：<span th:text="${goodsForm.stock}"></span>
		</p>

	        <p>
			<input type="button" onclick="subNum();" value="-" /> 
			<input style="width: 60px;" name="count" id="count" type="text" value="1" />                         <input type="button" onclick="addNum();" value="+" />
		</p>
		</div>
	        <div class="clear"></div>
		<button class="button"><span>加入購物車</span></button>
	</td>
	</tr>
	</table>
	</div>
	<div class="clear"></div>
	<div>
	<img alt="商品詳細狀況" th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height: 500px; width: 767px;" />
	</div>
	<div>
	<img alt="商品詳細狀況" th:src="@{showImage(pictureId=${goodsForm.pictureId6})}" style="height: 500px; width: 767px;" />
	</div>
	<div class="clear"></div>
	</form>
	
	
	
	
	重點掌握加載數據庫中的圖片-------th:src="@{showImage(pictureId=${goodsForm.pictureId})}"

數據庫增長查詢項

<select id="selectGoods"

parameterClass="cn.agriculture.web.form.GoodsForm"

resultClass="cn.agriculture.web.form.GoodsForm">

SELECT commodity.commodity_id as commodityId,

commodity.type as type,

supplier.supplier_name as supplierName,

brand.brand_name as brandName,

commodity.commodity_name as commodityName,

commodity.weight as weight,

commodity.is_gift as isGift,

commodity.specifications as specifications,

commodity.unit as unit,

commodity.benchmark_price as benchmarkPrice,

commodity.guide_price as guidePrice,

commodity.retail_price as retailPrice,

commodity.competition_level as competitionLevel,

commodity.note as note,

commodity.update_time as updateTime,

commodity.update_user as updateUser,

commodity.picture_id as pictureId,

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,

stock.stock as stock

FROM commodity, supplier, brand, stock

WHERE commodity.commodity_id = stock.commodity_id

AND commodity.supplier_id = supplier.supplier_id

AND commodity.brand_id = brand.brand_id

AND commodity.commodity_id = #commodityId#

</select>

圖片切換腳本代碼

/*圖片切換*/

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
function Focus() {
	function byid(id) {
		return document.getElementById(id);
	}
	function bytag(tag, obj) {
		return (typeof obj == 'object' ? obj: byid(obj)).getElementsByTagName(tag);
	}
	var timer = null;
	var oFocus = byid('tFocus');
	var oPic = byid('tFocus-pic');
	var oPicLis = bytag('li', oPic);
	var oBtn = byid('tFocus-btn');
	var oBtnLis = bytag('li', oBtn);
	var iActive = 0;
	function inlize() {
		oPicLis[0].style.filter = 'alpha(opacity:100)';
		oPicLis[0].style.opacity = 100;
		oPicLis[0].style.zIndex = 5;
	};
	for (var i = 0; i < oPicLis.length; i++) {
		oBtnLis[i].sIndex = i;
		oBtnLis[i].onclick = function() {
			if (this.sIndex == iActive) return;
			iActive = this.sIndex;
			changePic();
		}
	};
	byid('tFocus-leftbtn').onclick = byid('prev').onclick = function() {
		iActive--;
		if (iActive == -1) {
			iActive = oPicLis.length - 1;
		}
		changePic();
	};
	byid('tFocus-rightbtn').onclick = byid('next').onclick = function() {
		iActive++;
		if (iActive == oPicLis.length) {
			iActive = 0;
		}
		changePic();
	};
	
	function changePic() {
		for (var i = 0; i < oPicLis.length; i++) {
			doMove(oPicLis[i], 'opacity', 0);
			oPicLis[i].style.zIndex = 0;
			oBtnLis[i].className = '';
		};
		doMove(oPicLis[iActive], 'opacity', 100);
		oPicLis[iActive].style.zIndex = 5;
		oBtnLis[iActive].className = 'active';
		if (iActive == 0) {
			doMove(bytag('ul', oBtn)[0], 'left', 0);
		} else if (iActive >= oPicLis.length - 2) {
			doMove(bytag('ul', oBtn)[0], 'left', -(oPicLis.length - 3) * (oBtnLis[0].offsetWidth + 4));
		} else {
			doMove(bytag('ul', oBtn)[0], 'left', -(iActive - 1) * (oBtnLis[0].offsetWidth + 4));
		}
	};
	function autoplay() {
		if (iActive >= oPicLis.length - 1) {
			iActive = 0;
		} else {
			iActive++;
		}
		changePic();
	};
	aTimer = setInterval(autoplay, 2000);
	inlize();
	function getStyle(obj, attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		} else {
			return getComputedStyle(obj, false)[attr];
		}
	};
	function doMove(obj, attr, iTarget) {
		clearInterval(obj.timer);
		obj.timer = setInterval(function() {
			var iCur = 0;
			if (attr == 'opacity') {
				iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
			} else {
				iCur = parseInt(getStyle(obj, attr));
			}
			var iSpeed = (iTarget - iCur) / 6;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			if (iCur == iTarget) {
				clearInterval(obj.timer);
			} else {
				if (attr == 'opacity') {
					obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
					obj.style.opacity = (iCur + iSpeed) / 100;
				} else {
					obj.style[attr] = iCur + iSpeed + 'px';
				}
			}
		},
		30)
	};
	byid('tFocus').onmouseover = function() {
		clearInterval(aTimer);
	}
	byid('tFocus').onmouseout = function() {
		aTimer = setInterval(autoplay, 2000);
	}
}

設置圖片顯示樣式

@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, "新宋體";}

/* tFocus */

#tFocus-btn li.active,#tFocus-leftbtn,#tFocus-rightbtn{display:block;background:url(img/spr.png) no-repeat;}

#tFocus{width:338px;height:323px;background:#DDD;（設置的是整個圖片區域的背景顏色）   overflow:hidden;margin:30px auto 0 auto;}

#tFocus-pic{width:338px;height:243px;position:relative;}

#tFocus-pic li{width:338px;height:243px;position:absolute;left:0;top:0;filter:alpha(opacity:0);opacity:0;}

#tFocusBtn{width:359px;height:68px;padding-left:5px;margin-top:5px;z-index:20;overflow:hidden;}

#tFocus-btn{width:289px;height:68px;position:relative;left:0;bottom:0;overflow:hidden;float:left;margin-right:3px;}

#tFocus-btn ul{width:100000px;position:absolute;left:0;top:0;}

#tFocus-btn li{height:57px;width:91px;padding-top:7px;display:block;float:left;margin-right:5px;}

#tFocus-btn li img{border:2px solid #dddddd}

#tFocus-btn li.active{background-position:-448px -100px;}

#tFocus-btn li.active img{border:2px solid #40b9e5}

#tFocus-leftbtn,#tFocus-rightbtn{height:40px;margin-top:18px;width:15px;float:left;text-indent:-9999px;}

#tFocus-leftbtn{margin-right:5px;background-position:-455px -60px;}

#tFocus-rightbtn{background-position:-480px -60px;}

補充：

設置id自增一的SQL語句

<select id="getSeq" resultClass="java.lang.Integer">

SELECT _nextval('distributorPriceId')

</select>