Jquery 内容 DIV 幻灯片答案

【问题标题】：Jquery Content DIV SLIDEJquery 内容 DIV 幻灯片
【发布时间】：2011-08-22 14:25:52
【问题描述】：

我想做一个

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

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

大家好，

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

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

1) A 中的框将位于不同的标签/类别中，因此对于例如，将有 Cat、Dog 和 Snake 类别。

2) 现在我希望当我点击 CAT 时，滑块会滑动与标签关联的特定 cartigory，等等

3) 如果我滑动到 CAT 标签，它会立即捕捉并显示类别

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

或者这个：

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

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

【问题讨论】：

这里没有看到问题。
Jquery Content DIV SLIDE 那么我怎样才能让滚动条使用 snap 功能， - 当我点击一个标签时，比如 1、2、3、4，它会进入那个框与 1、2、3 等相关
到目前为止发布您的 HTML/Javascript，或者更好地创建一个 jsFiddle 供我们使用。
你的问题是半清楚的。按照 (A) 中的说法说 1=Cat，2=Dog 等等。当您单击 Cat 时，您希望下面的滑块移动吗？如果是，为什么？它服务于什么目的？也许更多解释将有助于更好地理解您的场景。

标签： javascript jquery jquery-plugins jquery-selectors

【解决方案1】：

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

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

签到here。

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

【讨论】：

好的，当用户点击“猫”时，框会移动到猫图像开始的位置？你是这个意思吗？如果是这样，您打算将标签放在哪里？您是否有针对您正在寻找的设计（图片）的提议？
嘿，我想稍微扩展一下……所以当用户将鼠标悬停在右侧时……框会移动，包括滚动条。如果您将鼠标悬停在左侧，它会向后滚动，它可以正常工作，但不是完全正常，它不会将滚动向后移动，也不会正确重置。像这样：smoothdivscroll.com/basicDemo.htm 我在这里有一个扩展版本：myislandshop.com/3 2.zip
GBS，有什么想法有帮助吗？，我发布了我的文件的 zip
我正在看。这是可行的，让我看看。
嘿 GBS 快速问题，当我尝试通过复制添加另一个标签（如 tag2.....）时，它并没有做同样的事情，就像它不起作用

【解决方案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
    });

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

【讨论】：

是的，基本的或领先的将不胜感激