滑动拇指 - 垂直

Question

我完全是一个 JavaScript 菜鸟，我真的不知道该怎么做。 我想要一个带有缩略图和箭头指示当前在滑块中显示哪个缩略图的水平滑块或选项卡脚本，如下所示：

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

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

编辑： 是的，对不起。我的意思是垂直的。我的不好。

Answer 1

其实没那么难。

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

$(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);
        });