一、效果图
二、实现
样式:
.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>
HTML
<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>
如需自动滚动,自己添加定时事件就好了
时间: 2024-10-01 08:28:27