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

Mad(x_x)boy · October 16, 2010

Всем привет!

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

Edited October 16, 2010 by Mad(x_x)boy

npofopr · October 16, 2010

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

Mad(x_x)boy · October 16, 2010

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

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

psywalker · October 16, 2010

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

Mad(x_x)boy · October 16, 2010

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

psywalker · October 16, 2010

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

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

Mad(x_x)boy · October 16, 2010

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

psywalker · October 16, 2010

setInterval и Array();

sigma77 · October 16, 2010

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

setInterval

Mad(x_x)boy · October 16, 2010

Спасибо)

footwear.by · October 13, 2015

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

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

Суть вопроса

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

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

hypnocolor · October 13, 2015

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

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

footwear.by · October 13, 2015

спасибо.

Launder · October 14, 2015

@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 · October 14, 2015

…

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

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

Launder · October 18, 2015

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

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

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

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

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

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

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

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

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

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

По поводу алгоритма работы анимации, выбора значений и т.д. подробно описано здесь: 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 · October 18, 2015

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

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

код такой

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

.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 · October 18, 2015

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

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

Марио · February 13, 2016

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

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

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

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

Launder · February 17, 2016

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

Марио · February 17, 2016

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

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

Launder · February 18, 2016

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

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

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

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

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

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

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

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

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

Марио · February 20, 2016

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

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

Launder · February 21, 2016

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

Launder · April 26, 2016

В 12.02.2016 в 14:21, Марио сказал:

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

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

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

В 16.02.2016 в 21:02, Марио сказал:

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

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

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

Launder · October 25, 2016

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

Sign In

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

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information