Как переместить слайдер изображения на следующий или предыдущий с помощью мыши?

0

Я пытаюсь использовать событие мыши на слайдере, то, что пользователь тащит налево, он перейдет к предыдущему, и при перетаскивании вправо он перейдет к следующему.

Это то, что я пробовал до сих пор

$('#main-div').mousedown(function () {
   $('#slider ul').animate({
            left: 0
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
});

Есть идеи по этому поводу?

Теги:

1 ответ

0
Лучший ответ

попробуйте это, чтобы определить направление движения, а затем вы можете выполнить анимацию.

Структура 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, чтобы не допустить прокрутки.

Поделиться
  • 0
    Можете ли вы показать мне пример использования div вместо списка?
  • 0
    это в основном то же самое, вы должны только изменить css и немного JS. см. jsfiddle jsfiddle.net/385YR
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню