Question

经过多次教程和大量时间后，我设法用jQuery构建一个滑块。然而，它并没有像我希望的那样顺利运作。我使用了自定义句柄，并且看到新的jQueryUI没有句柄选项，我在CSS中创建了一个句柄。但是，此句柄超出了滑块的所需边界。我上传了一个可以找到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>

我想知道的是，是否有任何方法可以强制滑动条留在其后面的图像中？如果我没有清楚地解释自己，测试链接将让你理解我的意思。

提前致谢， Dronnoc

Answer 1

问题来自于你的句柄被设置为超出它的容器。

这两个问题来自以下

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

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

当把手的左边设置为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）但是会使它移动得很好。

<强> EDIT2：

要启用对手柄的点击，您需要为handle指定一个高度（否则您将无法点击它）。然而，这将在滑动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>

jQuery Slider意外表现？

CSS

的jQuery

身体

1 个答案: