jQuery Slider 执行异常？

Question

经过许多教程和大量时间后，我成功地使用 jQuery 构建了一个滑块。然而，它的工作并不像我希望的那么顺利。我使用了自定义句柄，由于新的 jQueryUI 没有句柄选项，我在 CSS 中创建了一个句柄。然而，这个手柄超出了滑块所需的范围。我已经上传了一个测试页面，可以在此处找到。

我的代码如下：

CSS

<style type="text/css" media="screen">
<!--
    body {
        padding: 0; 
        font: 1em "Trebuchet MS", verdana, arial, sans-serif; 
        font-size: 100%;
        background-color: #212121;
        margin: 0;
    }

    h1 { 
        margin-bottom: 2px; 
    }

    #container {
        background-color: #fff;
        width: 580px;
        margin: 15px auto;
        padding: 50px;
    }

    /* slider specific CSS */
    .sliderGallery {
        background: url(productbrowser_background_20070622.jpg) no-repeat;
        overflow: hidden;
        position: relative;
        padding: 10px;
        height: 160px;
        width: 560px;
    }

    .sliderGallery UL {
        position: absolute;
        list-style: none;
        overflow: none;
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }

    .sliderGallery UL LI {
        display: inline;
    }

    .slider {
        width: 542px;
        height: 17px;
        margin-top: 140px;
        margin-left: 5px;
        padding: 1px;
        position: relative;
        background: url(productbrowser_scrollbar_20070622.png) no-repeat;
    }

    .ui-slider .ui-slider-handle {
        width:180px;
        margin-left:-90px;
    }

    .ui-slider-handle {
        position: absolute;
        cursor: default;
        height: 17px;
        top: 0;
        background: url(productbrowser_scroller_20080115.png) no-repeat;
        z-index: 100;
    }

    .slider span {
        color: #bbb;
        font-size: 80%;
        cursor: pointer;
        position: absolute;
        z-index: 110;
    }

    .slider .slider-lbl1 {
        left: 50px;
    }

    .slider .slider-lbl2 {
        left: 220px;
    }

    .slider .slider-lbl3 {
        left: 156px;
    }

    .slider .slider-lbl4 {
        left: 280px;
    }

    .slider .slider-lbl5 {
        left: 455px;
    }
-->
</style>

jQuery

<script src="jqueryui.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth() + 50;

        $('.handle', container).slider({
            min: -50,
            max: itemsWidth,
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    };
</script>

Body

<div id="container">
    <div class="sliderGallery">
        <ul>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
            <li><a href="#"><img src="ki_aikido.png"></a></li>
        </ul>
        <div class="slider ui-slider">
            <div class="handle"></div>
            <span class="slider-lbl1">Our Books</span>
            <span class="slider-lbl2">Other Books</span>
        </div>
    </div>
</div>

我想知道是否有任何方法可以强制滑块停留在其后面的图像内？如果我没有解释清楚的话，测试链接会让你明白我的意思。

提前致谢， 德龙诺克

Answer 1

问题在于您的句柄设置为超出其容器这一事实。

这两个问题来自以下内容

.ui-slider .ui-slider-handle {
    width:180px;
    margin-left:-90px;
}

第二行表示允许滑块在其初始容器的左侧之前移动 90px（因此左侧溢出）

并且当将手柄的左侧设置为 100% 时，这意味着它将从 90 像素 (180-90) 溢出到右侧。

我处理这个问题的方法是删除 margin-left:-90px;，将滚动 div 的宽度减少 180px 并使用另一个 div 来显示滚动条图像（位于你的滑动div，但更宽）。

像这样的东西：

.slider {
    width: 362px;
    height: 17px;
    margin-top: 140px;
    margin-left: 5px;
    padding: 1px;
    position: relative;
}

.ui-slider .ui-slider-handle {
    width:180px;
}
.sliderImg{
    background: url(productbrowser_scrollbar_20070622.png) no-repeat;
    /*add css to position it correctly here*/
}

编辑： 要回答您的评论，对页面上的 CSS 进行以下更正应该可以实现：

.slider {
    /*let the rest as is*/
    margin-left: 90px;
}

.ui-slider .ui-slider-handle {
    width:180px;
    margin-left:-90px;
}

此组合将使其具有相同的边界 (-90 + 90 = 0 )，但会让它移动得很好。

编辑2：

要启用手柄上的点击，您需要指定手柄的高度（否则您将无法点击它）。然而，这会将您的跨度移动到滑动 div 下方，要克服它，您必须指定它们的顶部位置（因为您已经将它们绝对化了，所以很容易 ;) ）。

应该做以下事情。

.handle {
    height: 100%;
} 
.slider span {
    /*let the rest as is*/
    top: 0;
}

为了使其在跨度之上工作，您需要像这样更改您的 html：

  <div class="handle">
      <span id="slider-tags" class="slider-lbl1">Our Books</span>
      <span id="slider-tags" class="slider-lbl2">Other Books</span>
  </div>