Javascript 从json生成滑块

我将从可用的JSON对象创建一个简单的滑块。我想用鼠标左键或右键滚动3个项目，即JSON的3个键

示例：如果我单击了右箭头，那么我想获取0到2个JSON键并显示图像，如果再次单击右箭头，那么是3到6，依此类推。类似地，如果单击了左箭头。我想从JSONkeys的当前位置创建负循环，比如6到3

我尝试了我的代码，但效果不好

var recents = "";
var imges = "";
var imge = "";
var recent_prod = <?php echo $recent_prod; ?>;
$("#num").html(recent_prod.length);
for(var a = 0; a < 3; a++)
{
    imges = recent_prod[a].image;
    imge = imges.split[","];
    recents += '<a href="' + base_url + 'init/product/' + recent_prod[a].id + '">'+
                    '<div class="related_prod_thumb">' +
                        '<div class="related_prod_img">'+
                            '<span class="helper"></span>'+
                            '<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
                        '</div><div class="related_prod_title">' + recent_prod[a].title +'</div>'+
                        '<div class="related_prod_price">' + 'Rs. ' + recent_prod[a].price + '</div></div></a>';
}
$("#recent_views").html(recents);

$(document).on("click", ".rightarr", function(){
    var next_recent_prod = "";
    var next = a + 3;
    for(var i = a; i < next; i++)
    {
        imges = recent_prod[i].image;
        imge = imges.split[","];
        next_recent_prod += '<a href="' + base_url + 'init/product/' + recent_prod[i].id + '">'+
                        '<div class="related_prod_thumb">' +
                            '<div class="related_prod_img">'+
                                '<span class="helper"></span>'+
                                '<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
                            '</div><div class="related_prod_title">' + recent_prod[i].title +'</div>'+
                            '<div class="related_prod_price">' + 'Rs. ' + recent_prod[i].price + '</div></div></a>';
        a = a + 1;
    }
    $("#num").html(a);

    $("#recent_views").html(next_recent_prod);
});

$(document).on("click", ".leftarr", function(){
    var next_recent_prod = "";
    var pre = a - 3;
    for(var i = pre; i >= 0; i--)
    {
        imges = recent_prod[i].image;
        imge = imges.split[","];
        next_recent_prod += '<a href="' + base_url + 'init/product/' + recent_prod[i].id + '">'+
                        '<div class="related_prod_thumb">' +
                            '<div class="related_prod_img">'+
                                '<span class="helper"></span>'+
                                '<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+
                            '</div><div class="related_prod_title">' + recent_prod[i].title +'</div>'+
                            '<div class="related_prod_price">' + 'Rs. ' + recent_prod[i].price + '</div></div></a>';
    }
    $("#num").html(a);

    $("#recent_views").html(next_recent_prod);
    a = i;
});

var-recents=“”；
var imges=“”；
var imge=“”；
var最近的产量=；
$（“#num”）.html（最近的产品长度）；
对于（var a=0；a<3；a++）
{
imges=最近的产品[a]。图像；
imge=imges.split[“，”]；
最近+=''；
}
$（“#最近的#u视图”）.html（最近的）；
$（document）.on（“click”，“.rightarr”，function（））{
var next_next_prod=“”；
var next=a+3；
for（var i=a；i=0；i--）
{
imges=最近的产品[i]。图像；
imge=imges.split[“，”]；
next_next_prod+=''；
}
$（“#num”）.html（a）；
$（“#最近的#视图”）.html（下一个#最近的#产品）；
a=i；
});

通过这段代码，我在单击左键时得到了JSON的负键。这是-1，但它在JSON中不存在。所以我得到了error

TypeError

。而且它也没有像预期的那样工作 任何帮助都将不胜感激。多谢各位

对于右箭头，似乎从

a

到

next

，即

a+3

，但对于左箭头，则从0到

pre

，这应该是

a-3

。你可能是说：

for(var i = a-1; i >= pre; i--)

在左箭头单击循环后，您有

a=i

，当该循环结束时，

i

的值将为-1（或者如果更正#1，它将比所需值低一个），因此您可能需要：

a = i + 1;

或者像右箭头一样，将其置于循环中：

a = a - 1; //or in short a--;

对于左箭头，您需要检查它是否达到零，如果达到零，则仅显示前3项，禁用左箭头，以此类推：

var pre;
if(a > 2)
    pre = a - 3;
else {
    pre = 2;
    //disable left & make sure you enable it when right is clicked.
}

对右箭头执行相同操作，检查其是否超过长度：

//not sure about 4, try 3 or 2 maybe if it doesn't work
if(a < recent_prod.length - 4)
    next = a + 3;
else {
    next = recent_prod.length - 3;
    //disable right & make sure you enable it when left is clicked.
}

//不确定4，如果不起作用，试试3或2
if（a<最近的产品长度-4）
下一个=a+3；
否则{
next=最近的产品长度-3；
//禁用右侧&确保在单击左侧时启用它。
}

---

当单击左箭头且键为0时，应该从上一个产品向下移动吗？否，它应该停止滑块，并且箭头键可能处于禁用状态。