javascript - jQuery Slider 执行意外？

Question

经过许多教程和大量时间后，我设法使用 jQuery 构建了一个 slider 。但是，它并没有我希望的那样顺利。我使用了一个自定义句柄，由于新的 jQueryUI 没有句柄选项，我在 CSS 中创建了一个句柄。但是，此句柄超出了 slider 所需的范围。我已经上传了一个可以找到的测试页here .

我的代码如下:

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>

正文

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

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

提前致谢，卓诺克

Answer 1

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

这两个问题来自于以下

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

第二行表示允许 slider 在其初始容器左侧之前移动 90px(因此左侧溢出)

而当 Handlebars 柄的左边设置为100%时，意味着它会从90px(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:

要启用 handle 点击，您需要为您的 handle 指定一个高度(否则您将无法点击它)。然而，这会将您的 span 移动到滑动 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>