jQuery 如何为 HTML 元素创建鼠标拖动滑块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17032721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a mouse drag slider for HTML elements?
提问by John
Many slider plugins that I have found are either only click to view next image or, if they do have mouse drag or touch drag capabilities, only allow images. Does anyone know of a plugin or possible way to code a mouse drag slider for any html elements? I'm specifically using an SVG, but it would be nice to have something in the future for sliding between div elements.
我发现的许多滑块插件要么只能单击以查看下一张图像，要么如果它们确实具有鼠标拖动或触摸拖动功能，则只允许图像。有没有人知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法？我专门使用 SVG，但是将来有一些东西可以在 div 元素之间滑动会很好。
回答by Shaddow
HTML:
HTML：
<div id="slider">
<ul>
<li style="background-color: #F00"></li>
<li style="background-color: #0F0"></li>
<li style="background-color: #00F"></li>
</ul>
</div>
CSS:
CSS：
#slider {
width: 400px;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 400px;
height: 400px;
float: left;
}
JS:
JS：
$(function() {
var slides = $('#slider ul').children().length;
var slideWidth = $('#slider').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
$("#slider ul").width(slides*slideWidth).draggable({
axis: 'x',
drag: function (event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
}
});
});
