jquery实现左右点击滑动

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)
     @ResponseBody
      public 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", ""); // 开放频度
         //调用service
         DataResultSet 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 {
	@Override
    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){
        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循环的“展示条数”改成自己需要的就可以。