像淘宝的样式一样上面是大图，下面是小图 ，点小图在大图上显示

2019独角兽企业重金招聘Python工程师标准>>>

1.style.css图片的样式

@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;overflow:hidden;margin:30px auto 0 auto;}

#tFocus-pic{width:240px;height:185px;position:relative;}

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

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

#tFocus-btn{width:230px;height:80px;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:55px;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:0.1px;float:left;text-indent:-9999px;}

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

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

2.goodsDetail.html页面显示前台代码，然后我们需要设置点击和左右按钮的功能，这就需要对应的jquery,即在js中要添加script.js文件。添加点击链接执行的操作。

<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>

<li><a href="#"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" 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">这个表示该项被默认选中。

<li class="active"><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId})}" style="height:70px;width:50px;" /></li>

<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId2})}" style="height:70px;width:50px;" /></li>

<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId3})}" style="height:70px;width:50px;" /></li>

<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId4})}" style="height:70px;width:50px;" /></li>

<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId5})}" style="height:70px;width:50px;" /></li>

<li><img alt="商品详细情况" th:src="@{showImage(pictureId=${goodsForm.pictureId1})}" style="height:70px;width:50px;" /></li>

</ul>

</div>

<a href="javascript:void(0);" id="tFocus-rightbtn">下一张</a>

</div>

</div><!--tFocus end-->

<script type="text/javascript">addLoadEvent(Focus());</script>

3.GoodsForm.java

private String pictureId;

private String pictureId1;

private String pictureId2;

private String pictureId3;

private String pictureId4;

private String pictureId5;

4.GoodsSqlMap.xml

<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,

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>

注:数据库里必须用相应picture_id的字段，和要有相应的图片。

转载于:https://my.oschina.net/u/2412052/blog/485000