SELECT nextval('distributor Priced')作用是ID自增1(知识点)
一 前台页面设置图片自动滚动,
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>
2、还有文件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; (定义行间距)
}
3、在数据库中添加图片调取数据库中的查询项
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,
4、设置图片显示样式
@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, "新宋体";}
5、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>,目的是为了样式能适用手机屏幕大小,方法和电脑界面的差不多