Я пытаюсь использовать событие мыши на слайдере, то, что пользователь тащит налево, он перейдет к предыдущему, и при перетаскивании вправо он перейдет к следующему.
Это то, что я пробовал до сих пор
$('#main-div').mousedown(function () {
$('#slider ul').animate({
left: 0
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
});
Есть идеи по этому поводу?
попробуйте это, чтобы определить направление движения, а затем вы можете выполнить анимацию.
Структура HTML может быть
<div id="main-div">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
и в коде javascript вы можете привязать методы mousedown и mouseup для вычисления направления (также вы можете рассчитать размер шага)
$mainDiv.mousedown(function (event) {
sliding = true;
startClientX = event.clientX;
return false;
}).mouseup(function (event) {
var step = event.clientX - startClientX,
dir = step > 0 ? 1 : -1;
step = Math.abs(step);
move(dir, step);
});
то вы можете вызвать метод перемещения для выполнения скользящей анимации
function move(dir, step) {
var $ul = $mainDiv.find('ul'),
liWidth = $ul.find('li').width();
$ul.animate({
left: '+=' + (dir * liWidth)
}, 200);
}
см. мой jsffidle http://jsfiddle.net/pBGGH/1/
Конечно, вы должны проверить границы элемента ul, чтобы не допустить прокрутки.