Javascript 获取缩略图滑块以隐藏和显示新图像集的问题

我试图添加到一个图像滑块，我很久以前做的。我以前在我的大图像下只有四个缩略图。我现在想要四个以上。我希望在选择下一个箭头之前隐藏多余的图像。我不知道如何让多余的图像显示出来。我肯定我必须设置一个最大限制来立即显示，但我不确定在哪里添加它。我希望缩略图图像集旋转4

我创作了一把小提琴

我补充说

//Thumb controls
$('.thumbcontrols li').click(function () {
    var
    //Slideshow
    sshow = $(this).closest('.slideshow'),
        //Increment
        incr = $(this).hasClass('prev') ? -1 : 1,
        //Current Index
        currentIndx = sshow.find('.big li').index(sshow.find('.big li:visible')),
        //Final Index
        finalIndx = currentIndx + incr;

    //Check ranges
    finalIndx = (finalIndx >= 4) ? 0 : ((finalIndx < 0) ? 3 : finalIndx);

    //Now trigger click event on respective image in nav
    sshow.find('.thumb li:eq(' + finalIndx + ')').trigger('click');
});
$('#bxslider-horizontal .bxslider').bxSlider({
    mode: 'horizontal',
    infiniteLoop: false,
    pager: false,
    slideWidth: 200,
    maxSlides: 4,
    minSlides: 2,
    slideMargin: 10
});

//拇指控件
$（'.thumbcontrols li'）。单击（函数（）{
变量
//幻灯片放映
sshow=$（this）.closest（'.slideshow'），
//增量
incr=$（this）.hasClass（'prev'）？-1:1，
//当前索引
currentIndx=sshow.find（'.big li'）.index（sshow.find（'.big li:visible'）），
//最终索引
finalIndx=当前indx+增量；
//检查范围
finalIndx=（finalIndx>=4）？0:（（finalIndx<0）？3:finalIndx）；
//现在在导航中的相应图像上触发单击事件
sshow.find（'.thumb li:eq（'+finalIndx+'））.trigger（'click'）；
});
$（'#bxslider horizontal.bxslider'）.bxslider({
模式：“水平”，
无穷远：错，
传呼机：错，
滑动宽度：200，
maxSlides:4，
米斯利德斯：2，
幻灯片摘要：10
});

但我不知道如何修改它，以得到我需要的。我更改了控件的类名，使它们与大型图像控件不同

---

你知道我该怎么做才能让这一切顺利吗？有人能给我指出正确的方向吗。

你可以使用

$（“.thumb img”）.length在
.thumb
类下计算
img
。将
4
（之前在javascript中设置的静态数字）替换为作为长度的数字

请参见下面的代码段：


$（文档）.ready（函数（）{
//当我们点击拇指img时
var totalImages=$（“.thumb img”）.length；
$（'.thumb li'，'.slideshow'）。单击（函数（）{
变量
//幻灯片放映
sshow=$（this）.closest（'.slideshow'），
//大的
big=sshow.find（'.big'），
//拇指
thumb=sshow.find（'.thumb'），
//获取索引
indx=thumb.find（'li'）。索引（this），
//当前索引
currentIndx=big.find（'li'）.index（big.find（'li:visible'））；
//如果currentIndx与单击的索引相同，则索引将不会执行任何操作
如果（currentIndx==indx）{
返回；
}
大的
//淡出当前图像
.find（'li:visible'）.fadeOut（）.end（）
//法登新形象
.find（'li:eq（'+indx+'））.fadeIn（）；
});
//当我们点击任何li内部控制部分时
$（'.controls li'）。单击（函数（）{
变量
//幻灯片放映
sshow=$（this）.closest（'.slideshow'），
//增量
incr=$（this）.hasClass（'prev'）？-1:1，
//当前索引
currentIndx=sshow.find（'.big li'）.index（sshow.find（'.big li:visible'）），
//最终索引
finalIndx=当前indx+增量；
//检查范围
finalIndx=（finalIndx>=totalImages）？0:（（finalIndx<0）？totalImages-1:finalIndx）；
//现在在导航中的相应图像上触发单击事件
sshow.find（'.thumb li:eq（'+finalIndx+'））.trigger（'click'）；
});
//拇指控制
$（'.thumbcontrols li'）。单击（函数（）{
变量
//幻灯片放映
sshow=$（this）.closest（'.slideshow'），
//增量
incr=$（this）.hasClass（'prev'）？-1:1，
//当前索引
currentIndx=sshow.find（'.big li'）.index（sshow.find（'.big li:visible'）），
//最终索引
finalIndx=当前indx+增量；
//检查范围
finalIndx=（finalIndx>=totalImages）？0:（（finalIndx<0）？totalImages-1:finalIndx）；
//现在在导航中的相应图像上触发单击事件
sshow.find（'.thumb li:eq（'+finalIndx+'））.trigger（'click'）；
});
$（'#bxslider horizontal.bxslider'）.bxslider({
模式：“水平”，
无穷远：错，
传呼机：错，
滑动宽度：200，
maxSlides:totalImages，
米斯利德斯：2，
幻灯片摘要：10
});
});
/*------------查看产品详细信息图片幻灯片-----*/
.slideshow.big、.slideshow.controls、.thumbcontrols.slideshow.thumb{
列表样式类型：无；
位置：相对位置；
保证金：0；
填充：0；
宽度：530px；
}
.幻灯片.大李{
位置：绝对位置；
排名：0；
左：0；
显示：无；
}
.幻灯片.大李：第一个孩子{
显示：块；
}
.slideshow.big img.slideshow.big{
宽度：530px；
高度：500px；
}
.幻灯片放映.控件{
位置：绝对位置；
顶部：220px；
}
.thumb li.thumb控件{
顶部：800px；
位置：绝对位置；
}
.slideshow.controls li{
宽度：40px；
高度：40px；
背景色：#666；
不透明度：.2；
颜色：#ccc；
浮动：左；
字体大小：24px；
文本对齐：居中；
线高：40px；
光标：指针；
列表样式：无；
}
.slideshow.controls li:悬停{
不透明度：1；
}
.幻灯片放映.控件.下一步{
浮动：对；
}
.幻灯片.拇指img{
宽度：70px；
}
.幻灯片.拇指李{
浮动：左；
光标：指针；
列表样式：无；
}
.幻灯片.拇指李：悬停{
不透明度：.8；
}
/*-测试拇指滑块-*/
#bxslider horizontal.bx wrapper.bx视口{
-莫兹盒阴影：无；
-webkit盒阴影：无；
盒影：无；
边框：1px纯色灰色；
边界半径：5px；
左：0px！重要；
填充物：5px；
背景：透明；
-webkit转换：translatez（0）；
-moz变换：translatez（0）；
-ms变换：translatez（0）；
-o变换：translatez（0）；
变换：translatez（0）；
}
#bxslider horizontal.bx包装器{
最大宽度：845px！重要；
}