Автоматическая смена картинок

[Mad(x_x)boy]

Всем привет!

Подскажите, пожалуйста, как сделать так, чтобы несколько картинок с определенным интревалом времени плавно сменяли друг друга на на страничке сайта?

Edited October 16, 2010 by Mad(x_x)boy

[npofopr]

поищите обычные слайдеры, их великое множество

[Mad(x_x)boy]

Тут либо javascript как я понял, либо Photoshop...

Во втором можно задать плавный переход?

[psywalker]

http://forum.htmlbook.ru/index.php?showtopic=20905

[Mad(x_x)boy]

psywalker, нет, не рандомное отображение картинок при обновлении страницы, а смена изображений в реальном времени, так сказать)

[psywalker]

  Mad(x_x)boy said:

psywalker, нет, не рандомное отображение картинок при обновлении страницы, а смена изображений в реальном времени, так сказать)

Ну и что, возьми и подгони пример под себя. Используй сетИнтервал, массив с картинками.

[Mad(x_x)boy]

Я не совсем понял, что вы сказали...

[psywalker]

setInterval и Array();

[sigma77]

  Mad(x_x)boy said:

Я не совсем понял, что вы сказали...

setInterval

[Mad(x_x)boy]

Спасибо)

[footwear.by]

реанимирую вопрос

на CSS это возможно сделать?

Суть вопроса

открывается страничка и каждые семь секунд меняется изображение не принципиально где оно находится и как.

именно изображение не слайдер а картинка не важно это подложка или сама картинка.

[hypnocolor]

  On 10/13/2015 at 8:55 PM, footwear.by said:

реанимирую вопрос

на CSS это возможно сделать?

Суть вопроса

открывается страничка и каждые семь секунд меняется изображение не принципиально где оно находится и как.

именно изображение не слайдер а картинка не важно это подложка или сама картинка.

 

http://jsfiddle.net/hypnocolor/21706njg/

[footwear.by]

спасибо.

[Launder]

@hypnocolor,

1.

html, body{    position: relative;    width: 100%;    height: 100%;}

в чём смысл этой конструкции?

 

2. для .image

    left: 50%;    top: 50%;

transform: translateX(-50%) translateY(-50%)

зачем сначала сдвигаем в одну сторону, затем в другую?...

 

3.     background-position: 50%; - не совсем понятен смысл этого правила. вроде, по идее, должен задвать положение картинки в центре, но при его отключении, практически ничего не меняется.

 

4. собственно анимация

animation: imagesFading 8s infinite

Это правило, как я понимаю означает следующее - полный цикл - 8 секунд, повторяется без конца, название imagesFading, соответственно и что именно проигрывается определяется описанием этой анимации.

Дальше для каждого рисунка описано время задержки (.image_01 - 6 секунд), .image_02 - 4 секунды, .image_03 - 2 секунды, .image_04 - сразу, соответственно 4 изображение включается сразу, остальные - через указанные интервалы. Каким образом они накладываются друг на друга? (И, кстати, зачем второе и четвёртое изображения одинаковы?)

 

5.

@keyframes imagesFading {  0% {    opacity:1;  }  17% {    opacity:1;  }  25% {    opacity:0;  }  92% {    opacity:0;  }  100% {    opacity:1;  }}

Ну и далее вот это описание, где, как я понимаю 0-17 нечто показывается, далее между 17 до 25 % изображение становится прозрачным и остаётся таковым до 92%, далее до 100% снова становится видимым, с тем, чтоб "светить" вновь до 17%.

 

В общем отдельными фрагментами более-менее ещё понимаю, что в этом коде, но единую картину это что-то никак не складывается... Не могли бы подробно прокомментировать что Вы делали и как это работает? Спасибо!

[hypnocolor]

  On 10/14/2015 at 10:02 PM, Launder said:

…

 

1. Чтобы размер страницы был равен размеру вьюпорта, и абсолютно спозиционированному диву было, откуда брать размер. 
2. Это один из способов вертикального и горизонтального центрирования дива с неизвестными размерами, подробнее написано здесь: http://frontender.info/centering-css-complete-guide/#vsotaishirinalementaneizvestn. В данном случае я центрировал див относительно всей страницы для наглядности.
3. На самом деле меняется, просто у картинок пропорции почти одинаковые с размером дива, поэтому разница не сильно заметна, если убрать центрирование позиции фона.

По поводу алгоритма работы анимации, выбора значений и т.д. подробно описано здесь: http://css3.bradshawenterprises.com/cfimg/#cf4a. Кроме того, там много других примеров смены изображений на css. Собственно, в своём примере я позаимствовал код оттуда. А по поводу одинаковых изображений — ну, мне стало лень искать ещё одну картинку, добавил одну из имеющихся вновь для количества 

[Launder]

  On 10/14/2015 at 10:32 PM, hypnocolor said:

Чтобы размер страницы был равен размеру вьюпорта

 

Ну да, понятно, поскольку тег <body> вложен в <html>, то если указать размер 100% только для <body>, то он займёт 100% родителя (но не страницы), а чтоб размер родителя <html> был равен размеру страницы, 100% нужно указать и для <html>. Тогда получится 100% -> <html> -> <body>, то есть тело страницы займёт 100% экрана.

 

  Quote

 

и абсолютно спозиционированному диву было, откуда брать размер.

 

А тут не совсем понятно, по умолчанию абсолютно позиционируемый элемент берёт свои координаты от начала страницы, ЛИБО от родителя, если он спозицонирован абсолютно, относительно или фиксированно

(но не статик, что есть, свойство по умолчанию, поэтому для позицонирования относительно родителя, как правило нужно указывать у родителя какое-то из трёх перечисленных свойств). Но нас-то устроит и от начала страницы.

Закомментировал этот кусок кода - ничего не изменилось.

 

  Quote

 

Это один из способов вертикального и горизонтального центрирования дива с неизвестными размерами, подробнее написано здесь: http://frontender.in...ementaneizvestn. В данном случае я центрировал див относительно всей страницы для наглядности.

 

Да, классная статья и классный способ. Просто и эффективно!

 

  Quote

 

На самом деле меняется, просто у картинок пропорции почти одинаковые с размером дива, поэтому разница не сильно заметна, если убрать центрирование позиции фона.

 

Ну а по какому принципу меняется-то? Рисунок своим центром сравнивается с центром родителя? Или как?

 

  Quote

 

По поводу алгоритма работы анимации, выбора значений и т.д. подробно описано здесь: http://css3.bradshaw...com/cfimg/#cf4a.

 

Да, хорошая статья.

Понял, примерно, следующее:

 

1. У нас есть 4 картинки, при равном их показе они занимают 25% времени от анимации.

2. Из этих 25% - последние 8% (с 17%) картинка постепенно исчезает (то есть меняют свою прозрачность с непрозрачного до полностью прозрачного, что соответствует изменению свойства opacity с единицы до нуля).

3. от 25% до 100% - время для следующих картинок, соответственно всё это время картинка остаётся прозрачной. Но поскольку анимация у нас плавная, то картинку нужно вовремя включить, на изменение изображения у нас уходит 8%, следовательно с 92% до 100%, нужно включить изображение обратно, от полностью прозрачного (opacity: 0) до непрозрачного (opacity: 1), с тем чтоб с 0% вновь начать свой 25% цикл.

4. Поскольку картинки у нас 4 и время 100% нам известно, значит мы можем посчитать, когда нам включать каждую картинку, цикл показа длится 25% и это соответствует двум секундам. Следовательно, для первого изображения задержка не нужна, второе изображение у нас начинает отображаться через 25%, то есть, через две секунды, третье через 50%, то есть, через 4 секунды, 4ое - через 6 секунд.

Поскольку правило анимации "знает" только одно изображение, с которым работает в данный момент, и показывает его 25% времени, то мы можем просто меняя задержку, начинать его показывать в тот момент, когда предыдущее изображение исчезает, а поскольку все остальные изображения также в этот момент не показываются (они находятся в разных положениях 75% цикла прозрачности), то у нас показывается только та картинка, которая на очереди.

Edited October 18, 2015 by Launder

[footwear.by]

В общем я у себя это реализовал правда делал три картинки в ссылках выше описано как считать.

Посмотреть тут http://krok.by/

 код такой

  Quote

 

<div class="vit">
  <img src="images/vitrina1.jpg" alt="Витрина магазина">
  <img src="images/vitrina2.jpg" alt="Витрина магазина">
  <img src="images/vitrina3.jpg" alt="Витрина магазина">
  </div>

 

  Quote

 

.vit {
  position:relative;
  margin: 0 auto;
  margin-top: -2em;
  margin-bottom: 6em;
  width: 800px;
  height: 520px;
  }

  .vit img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-animation: imagesFading 12s infinite;
    -moz-animation: imagesFading 12s infinite;
    -o-animation: imagesFading 12s infinite;
    animation: imagesFading 12s infinite;
}
 
 @keyframes imagesFading {
  0% {
    opacity:1;
  }
  25% {
    opacity:1;
  }
  33% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.vit img:nth-of-type(3) {
  animation-delay: 8s;
}
.vit img:nth-of-type(2) {
  animation-delay: 4s;
}
.vit img:nth-of-type(1) {
  animation-delay: 0s;
}

 

сильно не пеняйте

учусь

Edited October 19, 2015 by footwear.by

[Launder]

Алкогоритм, вроде, такой, только картинки можно через CSS реализовать.

_{Извините, если не в тему, может шрифт на сайте сделать чуть "полегче" как-то жирновато смотрится, ИМХО...}

[Марио]

  On 10/18/2015 at 9:36 PM, Launder said:

Алкогоритм, вроде, такой, только картинки можно через CSS реализовать.

_{Извините, если не в тему, может шрифт на сайте сделать чуть "полегче" как-то жирновато смотрится, ИМХО...}

 

Приветствую!

 

А как сделать паузу на эту анимацию? Мне нужно чтобы при наведении курсора на одну из картинок, эта карусель картинок останавливалась, а после того как убрали курсор, то анимация продолжалась с той картинки, на котором остановились. Есть у меня подозрения, что в этом случае смена картинок должна быть НЕ через Opacity. Я вот попробовал, гляньте: http://www.cssdesk.com/W9bgH

Я пробовал :hover написать и общий для всех картинок, и для каждой картинки отдельно. В любом случае результат не тот, что нужен. Что подскажите?

[Launder]

@Марио, спасибо за вопрос, он вполне естественен. Если честно, даже и не знаю что сходу тут можно предложить. Предположу только, что средствами CSS это сделать реально. Записал себе в список актуальных вопросов по вёрстке, как будет время, поизучаю... И Вы, если найдёте решение, напишите о нём, пожалуйста, в этой теме.

[Марио]

  On 2/17/2016 at 3:46 PM, Launder said:

@Марио, спасибо за вопрос, он вполне естественен. Если честно, даже и не знаю что сходу тут можно предложить. Предположу только, что средствами CSS это сделать реально. Записал себе в список актуальных вопросов по вёрстке, как будет время, поизучаю... И Вы, если найдёте решение, напишите о нём, пожалуйста, в этой теме.

 

Спасибо за ответ) Тогда быть может Вы можете сходу предложить, как для каждой картинке ссылку привязать? То есть кликаешь по картинке из карусели и тебя переносит на определенную страницу. А то я пробовал, а в итоге работает только  одна ссылка (из первого изображения) на все картинки, как будто поставил одну общую на всех.

[Launder]

@Марио, сходу могу предложить только идеи.

1. тут в теме было два варианта, когда фоновая картинка через CSS, и когда через html. рассмотрите какой вариант тут будет уместнее.

2. в зависимости от ссылки, в теге <a> через атрибут можно добавить разное стилевое оформление.

3. не обязательно работать через прозрачность, можно через transform двигать.

4. не обязательно через animation можно что-то попробовать через transition.

5. можно наверное, что-то менять через z-index

6. можно попробовать связку opacity и visibility.

 

Ну, вот это всё варианты на вскидку, если придут в голову ещё идеи - напишу

Но это всё так, не вникая Если что-либо из этого неожиданно даст результат - буду рад!

[Марио]

@Launder, в итоге я задумал эти два вопроса (пауза картинок и ссылка на каждую картинку) осуществить одновременно, как Вы уже наверное поняли. Это все можно через стили сделать? 

 

Может быть кто-то встречал подобное в интернете? Я, как и все ленивые начинающие, хочу найти готовый код и наткнулся на этот форум)

[Launder]

@Марио, сделайте наоборот, найдите решение и выложите его сюда, а какой-нибудь ленивый начинающий, захочет найти готовый код и наткнётся на этот форум А Вам в чём-то другом повезёт

[Launder]

  On 2/13/2016 at 10:21 AM, Марио said:

А как сделать паузу на эту анимацию?

Expand  

По всей видимости, как-то так:

#cf4a:hover
	{
  		animation-play-state: paused;
	}

 

  On 2/17/2016 at 5:02 PM, Марио said:

как для каждой картинке ссылку привязать?

Expand  

Выше в теме приведён код. Вам, конечно, нужно фон ставить не через стили, а через ссылки - img нужно обернуть в ссылки.

И, в анимации, кроме свойства opacity нужно ещё добавить свойство z-index. В результате, у нас в нужные моменты времени, ссылка-картинка не только отображена, но и находиться наверху z-плоскости, и не вижу причин, почему по ней нельзя кликнуть Как-то так.

[Launder]

Кстати, слайдер на чистом CSS.