Как скользить изображения со стороны, используя JavaScript? - PullRequest
Новая
       53

Как скользить изображения со стороны, используя JavaScript?

0 голосов
/ 02 мая 2011

У меня есть скрипт, который отображает изображения вроде карусели.Изображения помещаются в LI, а расположение слева изменяется в зависимости от ширины каждого слайда (все то же самое).В настоящее время старый слайд просто исчезает, а затем появляется новый.

Я хотел бы сделать так, чтобы они скользили по бокам, и мне было интересно, может ли кто-нибудь дать мне базовый пример того, как сделать это с помощью простого JavaScript (без jQuery!).

Например, я использую следующий код для обновления левого позиционирования содержащего UL.Как сделать так, чтобы оно сдвигало выбранное изображение влево или вправо (в зависимости от того, нажата ли следующая или предыдущая кнопка) 

containingUL.style.left = '-' + (slideNumber * slideWidth) + 'px';

Ответы [ 2 ]

3 голосов
/ 02 мая 2011

Вот базовая функция скольжения элемента. Вы можете поиграть со значениями steps и timer, чтобы получить правильную скорость и плавность анимации. 

function slideTo(el, left) {
    var steps = 25;
    var timer = 25;
    var elLeft = parseInt(el.style.left) || 0;
    var diff = left - elLeft;
    var stepSize = diff / steps;
    console.log(stepSize, ", ", steps);

    function step() {
        elLeft += stepSize;
        el.style.left = elLeft + "px";
        if (--steps) {
            setTimeout(step, timer);
        }
    }
    step();
}

Так что вы можете пойти: 

slideTo(containingUL, -slideNumber * slideWidth);

Редактировать: Забыли ссылку на JSFiddle

Редактировать: Чтобы сдвинуть влево, укажите значение left меньше текущего style.left. Для скольжения вправо укажите значение, превышающее текущее значение style.left. Для вас это не должно иметь большого значения. Вы должны иметь возможность подключить его к существующему коду. Я предполагаю, что ваш текущий код увеличивается или уменьшается slideNumber, а затем устанавливает style.left в соответствии с slideNumber. Примерно так должно работать: 

if (nextButtonClicked) slideNumber++;
else slideNumber--;
slideTo(containingUL, -slideNumber * slideWidth);

Я обновил JSFiddle рабочим примером скользящей «галереи», включая кнопки prev и next. http://jsfiddle.net/gilly3/EuzAK/2/

0 голосов
/ 02 мая 2011
...