HTML5商城开发四 多图或多商品的水平滚动展示

.horz_scroll {
float: left;
width: 20px;
height: 130px;
padding-top: 100px;
padding-left: 15px;
padding-right: 15px;
cursor: pointer;
}

.horz_scroll:hover {
background-color: #e9e9e9;
}

<script type="text/javascript">
$(function () {
//---- 设置标签图片滚动 ----//
var scrollWidth = 170;//单个商品模块的宽度，包括外边距
var scrollPos = 0;
var scrollCurPos = 0;
$("#horz_left").click(function () {
scrollCurPos = scrollPos;
if (scrollPos >= scrollWidth) {
scrollPos -= scrollWidth;
}
if (scrollPos < scrollWidth && scrollCurPos < scrollWidth) scrollPos = 0;
$("#srcollTag").scrollLeft(scrollPos);
});
$("#horz_right").click(function () {
var totalWidth = $("#srcollTag .product").length * scrollWidth - 800;//srcollTag的宽度800
if (scrollPos < totalWidth) {
scrollPos += scrollWidth;
if (scrollPos > totalWidth) scrollPos = totalWidth + 20;//移动到最右再加右边距20
}
$("#srcollTag").scrollLeft(scrollPos);
});
});
</script>

<div class="active_dd active_dd_lg btop btm bg-white">
<div class="horz_scroll" id="horz_left">
<img src="Content/images/horz_left.png" alt="left" />
</div>
<div id="srcollTag" style="width: 800px;height:230px;float:left; overflow: hidden;">
<div style="width:99999px;">
<div class="product">
<!-- 商品信息 -->
</div>
</div>
</div>
<div class="horz_scroll" id="horz_right"><img src="Content/images/horz_right.png" alt="right" /> </div>
</div>