我发现的许多 slider 插件要么只能单击以查看下一张图像,要么如果它们具有鼠标拖动或触摸拖动功能,则仅允许图像。有谁知道为任何 html 元素编写鼠标拖动 slider 代码的插件或可能的方法?我专门使用 SVG,但如果将来能在 div 元素之间滑动,那就太好了。
最佳答案
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:
#slider {
width: 400px;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 400px;
height: 400px;
float: left;
}
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;
}
});
});
关于javascript - 如何为 HTML 元素创建鼠标拖动 slider ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17032721/