jquery实现左右点击滑动

最新推荐文章于 2024-08-27 16:05:08 发布

Summer_DM

最新推荐文章于 2024-08-27 16:05:08 发布

阅读量4k

点赞数

分类专栏： Jquery+Servlet 文章标签： java javascript jquery

本文链接：https://blog.youkuaiyun.com/yy_wzh/article/details/108497295

版权

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)</

最低0.47元/天解锁文章