Как повернуть 4 (или более) изображения, затухающие между ними?

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

<img src="/images/image-1.jpg" id="featureImg1" />
<img src="/images/image-2.jpg" id="featureImg2" style="display:none;" />
<img src="/images/image-3.jpg" id="featureImg3" style="display:none;" />
<img src="/images/image-4.jpg" id="featureImg4" style="display:none;" />

Я готов к пересмотру HTML, хотя я не могу использовать абсолютное позиционирование в этом случае. Я использую jQuery еще где на сайте, поэтому он доступен. Мне также нужно иметь дело с тем, что изображение не загружается сразу, поскольку изображения больше.

ОТВЕТЫ

Ответ 1

Я очень рекомендую плагин jQuery Cycle. В этом случае он может сделать больше, чем вы ищете, но он хорошо структурирован и прост в настройке. Также есть облегченная версия под названием jQuery Cycle Lite, которая поддерживает только переходы fade.

Ответ 2

Вы можете использовать div и img, например:

<div id="featureImgContainer">
    <img src="/images/image-1.jpg" id="featureImg" />
</div>

В вашем Javascript выполните что-то вроде этого (псевдо-jQuery):

function rotateImage(newImage) {
    var oldImage = $("#featureImg").image();

    $("#featureImgContainer").css({backgroundImage: "url('" + oldImage + "')"}); // TODO Escape URL

    $("#featureImg").image(newImage).opacity(0).fadeIn();
}

В основном, мы делаем фон div "старым" изображением, а img - новый. Мы устанавливаем непрозрачность img в 0 и затухаем, так что кажется, что старое изображение затухает в новом. После затухания, div больше не отображается.

Постарайтесь правильно настроить CSS, чтобы установить ширину/высоту div и положение фона, где это необходимо.

Ответ 3

Я также нашел это расширение для jQuery: http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

Кажется, это довольно хорошо, хотя много кода для не слишком много.

Изменить: я также нашел Nivo Slider, который я использовал довольно часто и работал довольно хорошо. Он также имеет возможность иметь "навигацию" и предыдущие/следующие кнопки. Очень удобно.

Ответ 4

вы можете остаться с ядром jQuery и создать цикл z-index.

это можно сделать очень простым способом...