Question

我有一个使用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>

Answer 1

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

请参阅以下jsFiddle以获取使用您的代码的解决方案。

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

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

希望这有帮助

jquery滑块问题

1 个答案: