Блог

Главная - Вопросы по программированию - Как вставлять изображения сбоку с помощью JavaScript?

Как вставлять изображения сбоку с помощью JavaScript?

#javascript #animation #slideshow #slide

#javascript #Анимация #слайд-шоу #слайд

Вопрос:

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

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

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

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

Комментарии:

1. Просто любопытно… почему такое отвращение к jQuery?

2. Из интереса, почему нет jQuery?

3. Клиент против ее использования. Я знаю, что это совершенно нелепо, но обойти это невозможно. 🙁

4. Эти два могут представлять интерес: dhtmlkitchen.com/ape/example/anim и cinsoft.net/mylib-examples.html#transform . Оба являются модульными и позволяют избежать раздувания jQuery. Последний был тщательно протестирован в старых версиях IE и работает довольно хорошо.

Ответ №1:

Вот функция слайда базового элемента. Вы можете поиграть со значениями 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 в соответствии с номером слайда. Что-то вроде этого должно сработать:

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

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

Комментарии:

1. Как это можно обновить, чтобы создать другую функцию для вставки изображений справа? (для возврата к слайд-шоу)

2. @Cofey — Нет необходимости в другой функции, она будет вставлять изображения в любом направлении в зависимости от значения left параметра и текущего положения элемента. Я обновил свой ответ.

3. При двойном нажатии на кнопку возникает ошибка (поэтому она запускается снова до завершения анимации). Вместо одного изображения отображаются части двух изображений одновременно. Не могли бы вы, пожалуйста, сказать мне, как это исправить?

4. @Cofey — Вам нужно сохранить ссылку на значение, возвращаемое setTimeout , и сделать его доступным в глобальной области видимости или, по крайней мере, за пределами области видимости обработчика кликов. При нажатии кнопки сначала вызывается clearTimeout() . Смотрите этот обновленный JSFiddle: jsfiddle.net/gilly3/EuzAK/3 .

Ответ №2:

Простой, не jQuery:

http://sandbox.scriptiny.com/contentslider/slider.html http://www.webmonkey.com/2010/02/make_a_javascript_slideshow http://javascript.internet.com/miscellaneous/basic-slideshow.html