运用JQuery点击图片变大
goodsDetail.html中:
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/script.js"></script>
显示图片:
<div id="tFocus">
<div class="prev" id="prev"></div>
<div class="next" id="next"></div>
<ul id="tFocus-pic">
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId})}" style="height:185px;width:330px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" style="height:185px;width:330px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" style="height:185px;width:330px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" style="height:185px;width:330px;" /></a></li>
<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height:185px;width:330px;" /></a></li>
</ul>
<div id="tFocusBtn">
<a href="javascript:void(0);" id="tFocus-leftbtn">上一张</a>
<div id="tFocus-btn">
<ul>
<li class="active"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId})}" style= "height:54px;width:57px;"/></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" style="height:54px;width:57px;" /></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" style="height:54px;width:57px;" /></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" style="height:54px;width:57px;" /></li>
<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height:54px;width:57px;" /></li>
</ul>
</div>
<a href="javascript:void(0);" id="tFocus-rightbtn">下一张</a>
</div>
</div><!--tFocus end-->
<script type="text/javascript">addLoadEvent(Focus());</script>
GoodsForm.java
private String pictureId1;
private String pictureId2;
private String pictureId3;
private String pictureId4;
private String pictureId5;
private String pictureId6;
sql
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,
相应的数据库中添加图片。