Question

我想制作

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

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

嘿所有，

我正在构建自定义滑块。

我希望A和B的功能混合

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

2）现在我想当我点击CAT时滑块将滑动与Tag相关联的特定软件，等

3）如果我滑动到CAT标签，它会突然显示并且该类别将显示

帮助将是好的，因为我继续尝试搞清楚，希望我不要混淆你们。或

或者这个：

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

相反，当你点击3时，当你舔4它滑到4内容时它会滑到3CONTENT

Answer 1

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

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

检查行动here。

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

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

Jquery内容DIV幻灯片

2 个答案: