Jquery 内容 DIV 幻灯片

Question

我想做

(A) http://jqueryui.com/demos/slider/#side -滚动

(B) http://jqueryui.com/demos/slider/steps.html

大家好，

我正在构建一个自定义滑块。

我希望 A 和 B 的功能混合在一起

1) A 中的框将位于不同的标签/类别中，因此对于 例如，会有猫、狗和蛇类别。

2）现在我想当我单击 CAT 时，滑块将滑动与标签关联的特定 cartigory， 等等

3）如果我确实滑动到 CAT 标签，它就会突然弹出，并且会显示类别，

帮助会很好，因为我会继续尝试弄清楚它，希望我不会让你们感到困惑。 或者

这样：

http://jqueryui.com/demos/slider/#hotelrooms 和 < a href="http://jqueryui.com/demos/slider/#side-scroll" rel="nofollow">http://jqueryui.com/demos/slider/#side-scroll

代替当您单击 3 时，它会滑动到 3 内容 当您单击 4 时，它会滑动到 4 内容

Answer 1

你的意思是这样的吗？
我以你的参考文献（A）为例。

$(".scroll-content div").click(function () {
                var pos = $(this).position();
                $('.scroll-bar a').animate({ left: pos.left }, 'slow');
            });

请在此处查看操作。

Update1：​​我更新了上面链接中的示例，如果有帮助的话。

更新 2：

抱歉，我尝试了一些，但无法完全正常工作，但我有一些东西：

$(function(){
 $("div#makeMeScrollable").smoothDivScroll();
var ticker;
           $('.scrollingHotSpotRight').mouseover(function () {
               var counter = $(".scroll-bar").slider("value");
               var leftval = 0;
               ticker = setInterval(function () {
                   $(".scroll-bar").slider("value", counter);
                   counter++;
               }, 35);
           });
           $('.scrollingHotSpotRight').mouseout(clearStop);
           $('.scrollingHotSpotLeft').mouseover(function () {
               var counter = $(".scroll-bar").slider("value");
               ticker = setInterval(function () {
                   $(".scroll-bar").slider("value", counter);
                   counter--;
               }, 35);
           });
           $('.scrollingHotSpotLeft').mouseout(clearStop);

           function clearStop() {
               window.clearInterval(ticker);
           }
});

Answer 2

如果我正确理解你的问题，你需要做的就是利用滚动条实现中的步骤选项。

//Modified from the Slider scrollbar demo
var scrollbar = $( ".scroll-bar" ).slider({
        slide: function( event, ui ) {
            if ( scrollContent.width() > scrollPane.width() ) {
                scrollContent.css( "margin-left", Math.round(
                    ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                ) + "px" );
            } else {
                scrollContent.css( "margin-left", 0 );
            }
        },
        step: 50 //<---This
    });

或者您是否正在寻找某人来编写您所要求的全部功能？