前台页面图片切换
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>，目的是为了样式能适用手机屏幕大小，方法和电脑界面的差不多