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

StackOverflow https://stackoverflow.com/questions/449599

  •  19-08-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

Другие советы

Вы можете использовать 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();
}

По сути, мы делаем фон <=> "" old " изображение и <=> новый. Устанавливаем непрозрачность <=> равной 0, и постепенно увеличиваем ее, поэтому кажется, что старое изображение постепенно исчезает в новом. После появления <=> больше не отображается.

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

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

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

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

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

Редактировать: я также нашел Nivo Slider , который я использовал довольно часто и работал довольно Что ж. Он также имеет возможность иметь & Quot; навигацию & Quot; и предыдущая / следующая кнопки. Довольно удобно.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top