Question

我是一个完全是JavaScript的新手，我无法弄清楚如何做到这一点。我想要一个水平滑块或标签脚本，缩略图和箭头指示滑块中显示的缩略图电流，如下所示：

* HTTP：//jqueryglobe.com/labs/slide_thumbs/*

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

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

Answer 1

实际上并不难。

您只需要重新排序HTML，以便图像显示在预览主图像容器的右侧/左侧。然后，如果你看一下所涉及的简单的javascript，只需将“left”改为“top”，将“width”修改为“height”就像这样（此代码取自页面本身 - ＆gt; view source）：< / p>

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

滑动拇指 - 垂直

1 个答案: