Jquery Content DIV SLIDE

Question

我想让

（一） http://jqueryui.com/demos/slider/#side-scroll

（二） http://jqueryui.com/demos/slider/steps.html

大家好，

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

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

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

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

3）如果我确实滑动到CAT标签，它只会捕捉并且类别将显示

帮助会很好，因为我继续尝试弄清楚，希望我不要混淆你们。或

或者这个：

http://jqueryui.com/demos/slider/#hotelrooms 和 http://jqueryui.com/demos/slider/#side-scroll

相反，当您单击 3 时，它会滑动到 3CONTENT，当您舔 4 时它会滑动到 4 内容

Answer 1

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

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

在此处检查操作。

更新

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

更新 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

如果我正确理解您的问题，您需要做的就是在滚动条实现中使用 step 选项。

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

或者你正在寻找一个人来编写你要求的全部功能？