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的宽度800if (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>

如需自动滚动，自己添加定时事件就好了

转载于:https://www.cnblogs.com/xcsn/p/5216274.html

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

HTML5游戏开发(四)：飞机大战之显示场景和元素
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
HTML5游戏开发(四)
HTML5游戏开发(四) 一.线段 (一)网格绘制 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
学习淘淘商城第四十八课（商品搜索功能Controller实现）
在taotao-search-web工程需要添加对Search服务的引用,如下图所示. springmvc.xml文件所有代码如下: <?xml version="1.0" ...
HTML5游戏开发(三)：使用webpack构建TypeScript应用
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...
python 四象限图_【玩转图表10】动态四象限图--实现分区域策略分析
四象限图多用于战略.市场或产品分析中,它具有XY两个相关联的维度,同时利用分割线将若干元素分割成四个区域,每个区域代表一种状态,可以差异化管理.分割线可以是平均值.行业标准值或目标值. 四象限图一般用 ...
免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（四）HTML5中的FileSystem接口...
HTML 5除了提供用于获取文件信息的File对象外,还加入了FileSystem相关的应用接口. FileSystem对于不同的处理功能做了仔细的分类,如用于文件读取和处理的FileReader和F ...
《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
html5游戏开发-零基础开发RPG游戏-开源讲座(四)
了解上三篇的内容请点击: html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一) http://www.html5cn.org/a ...
html5脑图_基于HTML5的三维思维导图软件开发技术研究
龙源期刊网 http://www.qikan.com.cn 基于 HTML5 的三维思维导图软件开发技术研究作者:汪升华唐国纯来源:<软件工程> 2017 年第 10 期摘要: ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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