Javascript 创建垂直图像旋转木马

我正在尝试创建一个自定义的垂直图像旋转木马，因为我无法使用任何插件，因为附加到图像的js事件需要保留，唯一对我有效的方法是创建自定义旋转木马

功能

• 图像旋转木马在视口中有3个相同的大小
• 图像转盘确实有“下一步/上一步”按钮，允许您查看/选择更多图像
• “下一步/上一步”按钮一次只允许执行一个步骤，这意味着它不会选择下一组图像并在视口中显示

• Carousel允许您选择视口中的任何图像，单击“下一步/上一步”按钮时，这将同步

上面列出的所有功能都已实现

问题

最后一个图像不会在“下一步”按钮之前捕捉/停止，因为它将在两者之间创建空白

JS代码

$(function(){
        var image_height = 0;
        var gallery_offset = 0;
        var image_count = $('img.thumbnail').length;
        var click_count = 0;
        var image_height = 0;
        var last_images_count = 0;

        $('.gallery-container a').click(function(){
          $('.gallery-container a').removeClass('active')
            $(this).addClass('active');

        });

        jQuery('.thumbnail').each(function(){
          $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
          image_height = $(this).parent().outerHeight();
        })

        // Disable arrows if the images count is 3 below
        if(image_count <= 3) {
            $('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
            click_count = 0;
        }

        // Set the first image as active
        jQuery('.gallery-container img.thumbnail').first().click();
        var thumb_active = jQuery('.gallery-container .active');

        $('.gallery-container a').on('click', function() {
            thumb_active = jQuery('.gallery-container .active');
        });

        $('.product-more-pictures .down').on('click', function (e) {
            $('.product-more-pictures .up').removeClass('disabled')
            if(thumb_active.nextAll(':lt(1)').length) {
              thumb_active.nextAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');

            } 

            if( ! thumb_active.next().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }

            if (click_count < image_count) {
                click_count = click_count + 1;

                update_gallery('down');
            }



        });

        $('.product-more-pictures .up').on('click', function () {
            $('.product-more-pictures .down').removeClass('disabled')
            if(thumb_active.prevAll(':lt(1)').length) {
              thumb_active.prevAll(':lt(1)').children().click()
              thumb_active = jQuery('.gallery-container .active');
            }

            if( ! thumb_active.prev().length) {
              $(this).addClass('disabled')
            } else {
              $(this).removeClass('disabled');
            }

            if (click_count > 0) {
                click_count = click_count - 1;

                update_gallery('up');

            }
        });

        function update_gallery(direction) {         
            gallery_offset = click_count * image_height;
            last_images_count = thumb_active.nextAll().length;

            $(".gallery-container").animate({
              'top': '-' + gallery_offset + 'px'
            }, 800);

        }

});

$（函数（）{
var图像_高度=0；
var\u偏移量=0；
var image_count=$（'img.缩略图'）。长度；
变量单击计数=0；
var图像_高度=0；
var last_images_count=0；
$（'.gallery容器a'）。单击（函数（）{
$（'.gallery容器a'）.removeClass（'active'））
$（this.addClass（'active'）；
});
jQuery（'.thumbnail'）。每个（函数（）{
$（this.on（'load'，function（）{image_height=$（this.parent（）.outerHeight（）；}）；
image_height=$（this.parent（）.outerHeight（）；
})
//如果图像计数低于3，则禁用箭头
如果（图像计数0）{
单击计数=单击计数-1；
更新图库（“更新”）；
}
});
功能更新\u库（方向）{
画廊\偏移=单击\计数*图像\高度；
last_images_count=thumb_active.nextAll（）.length；
$（“.gallery容器”）.animate({
'顶部'：'-'+库_偏移量+'像素'
}, 800);
}
});

小提琴：

---

任何帮助都将不胜感激：）

您就快到了。您只需要编辑一个条件。 将单击事件下的“如果（单击计数<图像计数）”更改为“如果（单击计数<图像计数-3）”

$（函数（）{
var图像_高度=0；
var\u偏移量=0；
var image_count=$（'img.缩略图'）。长度；
变量单击计数=0；
var图像_高度=0；
var last_images_count=0；
$（'.gallery容器a'）。单击（函数（）{
$（'.gallery容器a'）.removeClass（'active'））
$（this.addClass（'active'）；
});
jQuery（'.thumbnail'）。每个（函数（）{
$（this.on（'load'，function（）{image_height=$（this.parent（）.outerHeight（）；}）；
image_height=$（this.parent（）.outerHeight（）；
})
//如果图像计数低于3，则禁用箭头
如果（图像计数0）{
单击计数=单击计数-1；
更新图库（“更新”）；
}
});
功能更新\u库（方向）{
画廊\偏移=单击\计数*图像\高度；
last_images_count=thumb_active.nextAll（）.length；
$（“.gallery容器”）.animate({
'顶部'：'-'+库_偏移量+'像素'
}, 800);
}
});
。产品更多图片a{
显示：块；
文本对齐：居中；
}
.产品更多图片a.已禁用{
指针事件：无！重要；
游标：默认值；
可见性：可见！重要；
背景：#C3C3；
}
.产品更多图片a.关闭.禁用：之前，
.产品更多图片a.启动.禁用：之前{
内容：''；
背景：rgba（255，255，255，0.42）；
位置：绝对位置；
身高：100%；
宽度：100%；
左：0px；
底部：0px；
}
.产品更多图片{
文本对齐：右对齐；
高度：549px；
宽度：111px；
溢出：隐藏；
位置：相对位置；
}
.画廊容器{
位置：相对位置；
填充：30px 0px；
}
.画廊集装箱img{
边缘底部：0px；
}
#产品图片。产品更多图片{
宽度：18.516667%；
}
.产品更多图片。向上，
.产品更多图片.下载{
位置：绝对位置；
背景：#999；
填充：0px；
宽度：100%；
文本对齐：居中；
z指数：80；
颜色：#fff；
填充物：5px10px；
}
.product更多图片。up{top:0px；}
.产品更多图片.下载{
底部：0px；
}
.产品更多图片a.活动图片{
边框：实心1pxRGBA（95,95,95,0.75）！重要；
}
.产品更多图片。图标V形向上，
.产品更多图片。图标V形向下{
颜色：#fff！重要；
字号：21px；
位置：相对位置；
}
.产品更多图片。图标V形向上{
顶部：0px；
}
.zoomContainer{z-index:999；}

试试这个。。。
您需要将单击计数初始化为-1，并将if（单击计数<图像计数）更改为“if（单击计数<图像计数-3）”，因为加载时默认选择的图像是第一个，所以我想这一个将满足您的需要
注意：css和HTML不需要更改

$(function(){
    var image_height = 0;
    var gallery_offset = 0;
    var image_count = $('img.thumbnail').length;
    var click_count = -1;
    var image_height = 0;
    var last_images_count = 0;

    $('.gallery-container a').click(function(){
      $('.gallery-container a').removeClass('active')
        $(this).addClass('active');

    });

    jQuery('.thumbnail').each(function(){
      $(this).on('load', function(){ image_height = $(this).parent().outerHeight(); });
      image_height = $(this).parent().outerHeight();
    })

    // Disable arrows if the images count is 3 below
    if(image_count <= 3) {
        $('.product-more-pictures .up, .product-more-pictures .down').addClass('disabled')
        click_count = 0;
    }

    // Set the first image as active
    jQuery('.gallery-container img.thumbnail').first().click();
    var thumb_active = jQuery('.gallery-container .active');

    $('.gallery-container a').on('click', function() {
        thumb_active = jQuery('.gallery-container .active');
    });

    $('.product-more-pictures .down').on('click', function (e) {
        $('.product-more-pictures .up').removeClass('disabled')
        if(thumb_active.nextAll(':lt(1)').length) {
          thumb_active.nextAll(':lt(1)').children().click()
          thumb_active = jQuery('.gallery-container .active');

        } 

        if( ! thumb_active.next().length) {
          $(this).addClass('disabled')
        } else {
          $(this).removeClass('disabled');
        }
        if (click_count < image_count - 3) {
            console.log(image_count)
            console.log(click_count)
            click_count = click_count + 1;

            update_gallery('down');
        }



    });

    $('.product-more-pictures .up').on('click', function () {
        $('.product-more-pictures .down').removeClass('disabled')
        if(thumb_active.prevAll(':lt(1)').length) {
          thumb_active.prevAll(':lt(1)').children().click()
          thumb_active = jQuery('.gallery-container .active');
        }

        if( ! thumb_active.prev().length) {
          $(this).addClass('disabled')
        } else {
          $(this).removeClass('disabled');
        }

        if (click_count > 0) {
            click_count = click_count - 1;

            update_gallery('up');

        }
    });

    function update_gallery(direction) {         
        gallery_offset = click_count * image_height;
        last_images_count = thumb_active.nextAll().length;

        $(".gallery-container").animate({
          'top': '-' + gallery_offset + 'px'
        }, 800);

    }

});

$（函数（）{
var图像_高度=0；
var\u偏移量=0；
var image_count=$（'img.缩略图'）。长度；
变量单击计数=-1；
var图像_高度=0；
var last_images_count=0；
$（'.gallery容器a'）。单击（函数（）{
$（'.gallery容器a'）.removeClass（'active'））
$（this.addClass（'active'）；
});
jQuery（'.thumbnail'）。每个（函数（）{
$（this.on（'load'，function（）{image_height=$（this.parent（）.outerHeight（）；}）；
形象_