jquery实现左右点击滑动

前端养成记：最近做的老项目，涉及到的一个简单的小功能，但是我这样的前端菜鸟还是费了一些功夫的，所以这里记录一下，以免日后忘记。

一、首先看下效果吧

这个是效果图，这个地方只能显示2个产品，然后可以点击左右滑动，来控制渲染。

二、HTML代码

这是一个div容器，代码是放在它里边的。<div class="border-gb-title" id="tjcp">推荐产品</div><div class="grey-card ptb40" id="tjcp_1"><div class="flex jus-c pro-white-box positon" id="recommendedProducts" style="position: relative;!important;"></div></div>

三、js（jquery）代码

<script>
//用来记录后台查询到的产品列表条数
var total;
//用来做点击左右滑动的指针
var startProd = 0;
//用来存储列表的数组(容器)
var proList = [];
//用来设置id选择器
var contentContainer = $("#recommendedProducts");
//推荐产品var recommendedProducts = function () {//后台需要的参数var param1 = {pageNo: 1,pageSize: 10,type: 5,cpzt: 4,tzly: ${prodList["投资领域ID"]},}//ajax请求数据$.ajax({url: "/prod/productList",type: "POST",data: param1,dateType: "JSON",success: function (ret) {if (ret['code'] > 0) {//渲染界面var dataList = ret['list'];if (dataList.length != 0){total = ret['totalCount'];contentContainer.empty()//渲染界面prodRender(dataList);//展示左右滑动renderDatas();}else {//当后台返回的产品列表list为空时，隐藏掉推荐产品整个div块$("#tjcp").hide();$("#tjcp_1").hide();}}}})}//详情渲染var prodRender = function (data) {for (var i = 0; i < data.length; i++) {var res = [];res.push('<div class="pro-white">');res.push('<div class="pro-title">'+data[i]['产品名称']+'</div>');res.push('<div class="mt20">');res.push('<div class="fl ml15">');res.push('<div class="num fwb">'+data[i]['业绩比较基准']+'</div>');res.push('<div class="mt15">业绩比较基准<span class="iconfont iconjizhun"></span></div>');res.push('</div>');res.push('<div class="fr mr15">');res.push('<div class="mt10 fs16">'+data[i]['产品期限']+'<span class="iconfont iconqixian"></span></div>');res.push('<div class="pro-border">'+ data[i]["起投金额"] + "万元起投/" + data[i]["风险等级"] + '</div>');res.push('</div>');res.push('<div class="clear"></div>');res.push('</div>');res.push('</div>');//先将所有产品放进容器，后面备用proList.push(res);}}//限制左右轮播function renderDatas(){contentContainer.empty();if(proList.length > 1){//数据至少2条//这里循环要展示的个数，我这里需要展示2条for(var i=0; i<2; i++){contentContainer.append(proList[(startProd+i)%total].join(""));}}else {//如果只有一条数据contentContainer.append(proList[(startProd)%total].join(""));}contentContainer.append('<div class="clear"></div>');contentContainer.append('<div class="slide-left" οnclick="left()"></div>');contentContainer.append('<div class="slide-right" οnclick="right()"></div>');}//左滑动function left() {startProd = (startProd-1+total)%total;renderDatas();}//右滑动function right() {startProd = (startProd+1+total)%total;renderDatas();}
</script>

三、后台(java)代码

/*
*
*接收前端传来的参数，直接调用数据库，返回数据即可
*/
@Controller
@RequestMapping(value = "/prod")
public class ProdController {@RequestMapping(value = "/productList",method = RequestMethod.POST)@ResponseBodypublic DataResultSet productList(HttpServletRequest request, HttpServletResponse response, ModelMap modelMap){String queryType = ParamUtils.getString(request, "type", ""); // 查询类型String custNo = ParamUtils.getString(request, "custNo", ""); // 客户号String userId = ParamUtils.getString(request, "userId", "");String prodName = ParamUtils.getString(request, "prodName", ""); // 产品名称String cpzt = ParamUtils.getString(request, "cpzt", ""); // 产品状态String cpbq = ParamUtils.getString(request, "cpbq", ""); // 产品标签String cpType = ParamUtils.getString(request, "cpType", ""); // 产品类型String cpqx = ParamUtils.getString(request, "cpqx", ""); // 产品期限String cpsyl = ParamUtils.getString(request, "cpsyl", ""); // 产品收益率String tzly = ParamUtils.getString(request, "tzly", ""); // 投资领域String kfpd = ParamUtils.getString(request, "kfpd", ""); // 开放频度//调用serviceDataResultSet dataList = prodService.queryProduct(queryType,custNo,userId,prodName,cpzt,cpbq,cpType,cpqx,cpsyl,tzly,kfpd);if (dataList.getCode()<0){dataList.setCode(-1);dataList.setMessage("查询出错，请稍后再试");}return dataList;}
}//service接口
public interface ProdService {public DataResultSet queryProduct(String queryType,String custNo,String userId,String prodName,String cpzt,String cpbq,String cpType,String cpqx,String cpsyl,String tzly,String kfpd);
}//service实现类
@Service
public class ProdServiceImpl implements ProdService {@Overridepublic DataResultSet queryProduct(String queryType,String custNo,String userId,String prodName,String cpzt,String cpbq,String cpType,String cpqx,String cpsyl,String tzly,String kfpd){return baseDao.callOldFwcpPaging(null,"PRODUCT_LST",1,10,"",queryType,custNo,userId,prodName,cpzt,cpbq,cpType,cpqx,cpsyl,tzly,kfpd);}这里说明一下，因为本项目技术比较老旧，用的是存储过程，所以这里直接调用了存储过程的名字。

项目说明：
1、项目比较老，用的jsp+springmvc+存储过程(Oracle)；
2、所以基本业务逻辑前端都会做判断，后端的逻辑基本都在存储过程里边，因此后台直接调用存储过程接口，返回数据给前台就可以了。
3、上面的这个左右滑动是个万能公式，可以套用的，只需要将renderDatas()方法的for循环的“展示条数”改成自己需要的就可以。

jquery实现左右点击滑动相关推荐

jQuery幻灯片带缩略图平移滑动焦点图
先上图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
点击滑动(slideToggle)
需要用到的图标 <a href="#" data-toggle="tooltip" data-original-title="条件查询" ...
jQuery手机触屏左右滑动切换栏目和焦点图
实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下. 首先来看看左右滑动切换焦点图: JQuery代码 $(function(){TouchSlide({slideC ...
php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多，不刷新页面加载更多数据！附：可用源码+demo...
先上效果: 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了! 新建index.php jQuery+p ...
python写一个自动登录脚本_Python 实现自动登录+点击+滑动验证功能
需要用到的库有selenium,还需要安装Chrome浏览器驱动,具体如何安装我就不详述了在这里我模拟了csdn的登录过程 ** 1**.首先打开网页,用户名+密码登录,然后定位用户名输入框,和密码 ...
python自动登录教程_Python 实现自动登录+点击+滑动验证功能
需要用到的库有selenium,还需要安装Chrome浏览器驱动,具体如何安装我就不详述了在这里我模拟了csdn的登录过程 ** 1**.首先打开网页,用户名+密码登录,然后定位用户名输入框,和密码 ...
mui点击添加类名_Mui使用jquery并且使用点击跳转新窗口的实例
网上好多朋友是这样做的: 全局插入了js代码 mui('body').on('tap', 'a', function () { document.location.href = this.href; ...
jQuery自动完成点击html元素
1 /************************************************************************** 2 * jQuery自动完成点击html元素 ...
php jquery实现弹窗,jquery+video实现点击播弹窗放视频功能
html5 jquery+video实现视频列表点击某个视频播放视频功能,播放视频弹出窗口进行播放,关闭窗口关闭视频. 实现过程:当点击某个视频的时候把已经用javascript拼接好的video标签 ...

jquery实现左右点击滑动

jquery实现左右点击滑动

一、首先看下效果吧

二、HTML代码

三、js（jquery）代码

三、后台(java)代码

jquery实现左右点击滑动相关推荐

最新文章

热门文章