jQuery Slider意外表现？

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

我的代码如下：

CSS

jQuery的

   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); } }); };  

身体

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Our Books Other Books 
 
  

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

在此先感谢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：

  
 Our Books Other Books