javascript - 创建垂直图像轮播

Question

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

功能

• 图像轮播在视口(viewport)中确实有 3 个相同的尺寸。
• 图片轮播确实有下一个/上一个按钮，可让您查看/选择更多图片。
• 下一个/上一个按钮一次只允许一个步骤，这意味着它不会选择下一组图像并将其显示在视口(viewport)中。

• Carousel 让您可以选择视口(viewport)中的任何图像，这将在单击下一个/上一个按钮时同步

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

问题

最后一张图片不会在下一个按钮之前捕捉/停止，因为它会在两者之间创建空白。

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

        }

});

fiddle :https://jsfiddle.net/qrvrdjch/6/

任何帮助将不胜感激:)

Answer 1

试试这个...您需要将点击计数初始化为 -1，并将 if (click_count < image_count) 更改为此“if (click_count < image_count - 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);

    }

});