Как повернуть 4 (или более) изображения, исчезая между каждым? - PullRequest
Новая
       27

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

14 голосов
/ 16 января 2009

У меня есть 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 еще где-то на сайте, поэтому он доступен. Мне также нужно иметь дело с изображением, которое не загружается сразу, так как изображения больше.

Ответы [ 4 ]

21 голосов
/ 16 января 2009

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

5 голосов
/ 16 января 2009

Вы можете использовать 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 и положение фона, где это необходимо.

1 голос
/ 18 января 2009

Вы можете остаться с ядром jQuery и получить цикл, чтобы вызвать z-индекс.

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

1 голос
/ 16 января 2009

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

Похоже, что это довольно неплохо, хотя кода не так много.

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

...