滑动拇指 - 垂直

Question

我完全是一个 JavaScript 新手，我真的不知道该怎么做。 我想要一个水平滑块或标签脚本，其中包含缩略图和箭头指示当前在滑块中显示哪个缩略图，如下所示：

*http://jqueryglobe.com/labs/slide_thumbs/*

但它必须是水平的垂直的。有人可以帮我解决这个问题吗？ 提前致谢

编辑： 是的，我很抱歉。我的意思是垂直的。我的错。

Answer 1

其实没那么难。

您只需对 HTML 重新排序，以便图像显示在预览主图像容器的右侧/左侧。 然后，如果您查看所涉及的简单 javascript，只需将“left”的所有内容修改为“top”，将“width”修改为“height”，如下所示（此代码取自页面本身 -> 查看源代码）：

$(document).ready(function() {
            // Save  the jQuery objects for later use.
            var outer       = $("#preview_outer");
            var arrow       = $("#arrow");
            var thumbs      = $("#thumbs span");

            var preview_pos;
            var preview_els = $("#preview_inner div");
            var image_width = preview_els.eq(0).height(); // Get height of imaages

            // Hook up the click event
            thumbs.click(function() {
                // Get position of current image
                preview_pos = preview_els.eq( thumbs.index( this) ).position();

                // Animate them!
                outer.stop().animate( {'scrollTop' : preview_pos.top},  500 );
                arrow.stop().animate( {'top' : $(this).position().top },    500 );
            });

            // Reset positions on load
            arrow.css( {'top' : thumbs.eq(0).position().top } ).show();
            outer.animate( {'scrollTop' : 0}, 0 );

            // Set initial width
            $("#preview_inner").css('height', preview_els.length * image_height);
        });