Сдвиг div по клику с помощью .animate (): как ограничить смещение? - PullRequest
Новая
       13

Сдвиг div по клику с помощью .animate (): как ограничить смещение?

1 голос
/ 27 августа 2010

Я создал очень простой слайдер с помощью jQuery. Есть две стрелки, названные .theleft и .theright, которые перемещают некоторое содержимое div при нажатии, поэтому горизонтальная галерея, полная изображений, перемещается из стороны в сторону в диапазоне 950 пикселей. Это код: 

$(".theright").click(function() {               
$(".mymove").animate({ 
        left: "-=950px",
      }, 1500 );
});

$(".theleft").click(function() {                
$(".mymove").animate({ 
        left: "+=950px",
      }, 1500 );
});

HTML-код очень прост: 

<div class="mymove" style="position:relative">
    <ul>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
    </ul>
</div>

Мой вопрос: когда страница загружается, если первое, что я делаю, - щелкаю стрелку влево, галерея сбрасывается с области просмотра, теряется с правой стороны, то есть я не нашла способ ограничить 'действие ползунка ...

Вы знаете какой-нибудь способ улучшить это?

Большое спасибо.

1 Ответ

1 голос
/ 27 августа 2010

Вам понадобится какой-то счетчик, который будет отслеживать, где находится ваш слайдер.

Так что, если он изначально начинается с 0, есть что-то вроде этого: 

$(".theleft").click(function() {                
    if (slider_pos > 0) {
        $(".mymove").animate({ 
            left: "+=950px",
        }, 1500 );
        // Then update slider_pos here i.e. view_pos += 950;
    }
});
...