style.css
javascript
.span_2_of_3 h3{ ------------定义标题H3的样式css
color:#D54F30;java
margin-bottom:0.2em;web
padding-left:0.4em;数据库
font-size:2em;ide
font-weight : normal;post
margin-top:0px;ui
letter-spacing: -1px; --------------设置字间距this
}url
.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>