jquery滑块问题答案

【问题标题】：jquery slider problemjquery滑块问题
【发布时间】：2011-07-19 01:21:01
【问题描述】：

我有一个使用 jquery UI 在拖动时滚动的滑块，但是手柄似乎稍微拖动到远离滑动条末端的位置，任何人都知道为什么会这样吗？

HTML

    <div id="content">

<div id="sliderContent">    
      <div class="viewer">
        <div class="content-conveyor ui-helper-clearfix">

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

          <div class="item">

          <img src="images/slide_image_one.png"/>

          </div>

        </div>
      </div>
      <div id="slider"></div>
    </div>

    </div>

CSS /* 滑动横幅元素 */

#sliderContent { width:900px; padding:0 0 0 0;}
.viewer { width:900px; height:299px; padding:0px; overflow:hidden; position:relative;}
.content-conveyor { width:900px; height:299px; position:relative; }
.item { width:450px; height: 299px; float:left;}

#slider {
margin: 10px 0 0 0;
}
.ui-slider-horizontal {
    height: 4px;
    background: url(../images/slider_bg.png;);
    border: none;
    width: 900px;
    float: left;
}

.ui-slider .ui-slider-handle {
    cursor: default;
    height: 15px;
    position: absolute;
    width: 25px;
    z-index: 2;
    background: url('../images/slider_handle.png') no-repeat;
    border: none;
}

javascript

<script type="text/javascript">
      $(function() {

        //vars
        var conveyor = $(".content-conveyor", $("#sliderContent")),
        item = $(".item", $("#sliderContent"));

        //set length of conveyor
        conveyor.css("width", item.length * parseInt(item.css("width")));

        //config
        var sliderOpts = {
          max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
          slide: function(e, ui) { 
            conveyor.css("left", "-" + ui.value + "px");
          }
        };

        //create slider
        $("#slider").slider(sliderOpts);
      });
    </script>

【问题讨论】：

标签： jquery html css

【解决方案1】：

滑块位置基于助手的最左侧位置。你需要在它周围做一个包装器来定位，然后用它一半宽度的边距把助手拉回来。

有关使用您的代码的解决方案，请参阅以下 jsFiddle。

http://jsfiddle.net/Bprw2/1/

或http://jqueryui.com/demos/slider/#side-scroll 并开放源代码以获得更广泛的示例。

希望对你有帮助

【讨论】：