Смена картинки при нажатии
Тебе нужно перенести блок с скриптом в конец body. т.к. HTML страница рендерится по очереди кода. ниже пример где должно работать:
Смена картинок var i=0; var image=document.getElementById("image"); // Добавте свои картинки через запятую var imgs=new Array('note.png','note_30.png', 'note_30_.png'); function imgsrc() Отслеживать
user236980
ответ дан 4 авг 2016 в 20:48
21 1 1 бронзовый знак
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Смена картинок HTML/CSS/JS?
Столкнулся с такой проблемой, что не получается сделать переход главного фона на сайте. (всего 3 картинки — «bg.jpg», «bg_1.jpg», «bg_2.jpg»)
Какой нужен код для HTML, CSS, JS в данном случае?
- ГлавнаяНовостиФорумДонатО нас
Личный кабинет#
#
#
Начать играть .header < padding-top: 20px; width: 100%; background: url(../img/bg.jpg) no-repeat center; background-size: cover; padding-bottom: 100px; min-height: max-content; >header a < color: #2c3e50; >.logo < margin-right: 69px; >.menu < margin: auto; display: flex; padding-top: 20px; padding-bottom: 20px; >.menu li a < text-decoration: none; font-size: 14px; margin-right: 40px; letter-spacing: 0.1em; transition: 0.3s all; >.menu li a:hover < color: #52ce70; box-shadow: 0 2px 0 0 #52ce70; >.index__login < margin-left: auto; >.index__login < display: flex; justify-content: center; align-items: center; width: 180px; height: 45px; background: #52ce70; color: #fff; transition: 0.3s all; box-shadow: 0 5px 35px rgba(0, 0, 0, 0.22); >.index__login:hover
- Вопрос задан более двух лет назад
- 823 просмотра
3 комментария
Средний 3 комментария
Автоматическая смена картинок на CSS. Смена изображений по таймеру
Автоматическая смена картинок при помощи CSS до недавнего времени была невозможной. Если была такая потребность, то делалось это исключительно силами JavaScript. JavaScript — это язык программирования, который специально создавался для того, чтобы анимировать веб-страницы. До его прихода в веб-разработку, веб-страницы были статичными и не обладали современной динамикой.
Проблема JavaScript в том, что этот язык немного сложнее чем CSS, плюс его скрипты больше нагружают браузер пользователя. CSS «легче», поэтому если есть возможность для простой анимации воспользоваться силами CSS, то лучше это сделать.
Автоматическая смена картинок — это вид простой анимации, где необязательно применять возможности JavaScript. Поэтому сегодня мы покажем как можно наладить смену изображений, используя возможности CSS.
Смена картинок с помощью CSS
Смена картинок с помощью CSS может быть реализована несколькими методами. Сегодня мы покажем 2 вариации автоматизации. Любую из них вы сможете использовать у себя на сайте, доработав под собственные нужды.
Первое с чего нужно начать — это разметка HTML. У нас она такая:
Прежде чем заняться анимированием картинок, нужно им задать определенные стили. В нашем случае они такие:
.imgContainer
position:relative;
height:300px;
width:500px;
margin:10 auto;
>
.imgContainer img
position:absolute;
left:0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
>
После того как основные стили были заданы, можно реализовать смену картинок с помощью CSS. Стили будут такими:
@-webkit-keyframes myImgAnimation
0%
opacity:1;
>
40%
opacity:1;
>
50%
opacity:0;
>
100%
opacity:0;
>
>
@-moz-keyframes myImgAnimation
0%
opacity:1;
>
40%
opacity:1;
>
50%
opacity:0;
>
100%
opacity:0;
>
>
@-o-keyframes myImgAnimation
0%
opacity:1;
>
40%
opacity:1;
>
50%
opacity:0;
>
100%
opacity:0;
>
>
@keyframes myImgAnimation
0%
opacity:1;
>
40%
opacity:1;
>
50%
opacity:0;
>
100%
opacity:0;
>
>
#imgСontainer img.firstImg
-webkit-animation-name: myImgAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
-webkit-animation-direction: alternate;
-moz-animation-name: myImgAnimation;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 6s;
-moz-animation-direction: alternate;
-o-animation-name: myImgAnimation;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 6s;
-o-animation-direction: alternate;
animation-name: myImgAnimation;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 6s;
animation-direction: alternate;
>
На этом первый вариант смены картинок с помощью CSS закончен. По факту мы имеем две картинки, которые будут непрерывно заменять друг друга через каждые 6 секунд. По сути это и есть реализация анимации по таймеру. Кода CSS на первый взгляд покажется много, но это потому что пока мы вынуждены писать практически один и тот же код, но для разных браузер ов . Если оставить только общий CSS-код, то в разных браузерах стили могут отображаться с искажением. Надеемся, что в скором времени это исправят и можно будет писать единственные стили под разные браузеры.
Давайте рассмотрим еще одну реализацию схемы картинок с помощью CSS. На этот раз возьмем три картинки. У нас получится вот такая HTML-разметка:
Обратите внимание, что в этом случае HTML-разметка немного отличается от первого варианта и выглядит немного проще.
Стили CSS будут такими:
@keyframes myImgAnimation
0%
12.12%
35.35%
45.45%
100%
>
. imgContainer
. imgContainer img
. imgContainer img:nth-child(1)
. imgContainer img:nth-child(2)
. imgContainer img:nth-child(3)
На этом все. Данный код можно самостоятельно немного «подкрутить». Например, можно изменить скорость смены изображений, добавить или убрать изображения и т. д.
Заключение
Сегодня мы рассмотрели, как реализуется автоматическая смена картинок силами чистого CSS. Вся прелесть CSS в том, что вариантов реализовать автоматическую смену изображений очень много. Если лучше изучить возможности таблицы стилей, тогда в некоторых случаях простой анимации можно не использовать возможности JavaScript, а ограничиваться знаниями CSS.
Понятно, что чистый CSS-код еще не скоро заменит функциональные возможности JavaScript, но предпосылки к этому есть.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Смена картинок в зависимости от времени
Всем привет. Сегодня хочу рассказать вам о том, как реализовать смену картинок на сайте, в зависимости от времени суток.
То есть, например, днем показываем солнышко, а вечером луну. Как это применить на landing page? Да 1000 вариантов! Наверняка вы все видели доклад Григория Бакунова о посадочных страницах.
В нем затрагивалась тема, того, что лучше работает видео или картинка. Так вот, выяснилось, что днем картинка, а вечером — видео. Ведь днем многие на работе и не могут со звуком посмотреть видео, поэтому лучше работают картинки, а вечером, когда большинство уже дома, — лучше работает видео.
Так вот, решил написать небольшой скрипт на js, который бы реализовывал подобную задачу:
Специально сделал несколько условий, чтобы потом возникало меньше вопросов. По аналогии можно менять время и менять что-то на сайте хоть каждый час.
Теперь немного объясню, как это все работает.
У нас есть блок, в котором мы хотим менять контент, например:
В таком случае нужно указать его в скрипте, вот здесь:
document.write(' Дальше мы говорим, что если время находится в промежутке между 12 и 19 часами, то в contArea показываем картинку, если нет, то проверяем следующее условие:
if (hour >= 12 && hour < 19) < document.getElementById("contArea").innerHTML = '
';
Думаю, что тут все просто. Даже не обязательно что-то понимать в js. Да, можно сократить немного количесвто кода, если использовать jQuery, но хотел реализовать это именно без использования фреймворка. А вообще, подобные штуки лучше писать на серверном языке, думаю. Если у кого-то есть желание, можете переписать на php, а я добавлю потом в статью. А нет, то рано или поздно все равно сделаю это и дополню.
P.S. обновление №1
Как оказалось, многим интересно получение не только часов но и дней, месяцев. К счастью, для того, чтобы поправить ситуацию не нужно ничего мудрить, ведь мы используем объект Date и у него есть много компонентов:
- getFullYear() — год из 4 цифр;
- getMonth() — месяц от 0 до 11;
- getHours() — время по часам от 1 — 24;
А также можно получить минуты, секунды, дни недели, миллисекунды, но об этом можно почитать в любом справочнике по js.
Вот пример с днями:
Если кому-то нужен исходник, то вот он, только там немного другие id:
Вот такой не хитрый способ еще немного повысить конверсию получился. Покак не получается чаще выкладывать статьи. Если вас интересует какая-то конкретная тема, то пишите в соответствующем разделе, буду стараться, в первую очередь, писать статьи на те темы, которые озвучены там.
06/10/2022 Дмитрий Давыдов
9 комментариев
Еще бы хотелось, сделать условия не по часам, а, например, по дням. Чтобы например, в течение недели менялась акция. Один день один товар, другой день другой, потом третий, и так далее. А то когда акция не меняется, то получается псевдоакция. Заходишь в любой момент на сайт, а там как всегда осталось полчаса до конца акции. А если сами акции будут меняться, тогда будет всё по честному. Никто не запрещает повторять акцию, скажем, раз в неделю.