Как на сайте сделать смену картинок и контента?

Question

[NemuiSaburau]

Нужно сделать, чтобы на сайте менялись картинки со временем.
Знаю, что это можно сделать через CSS3, но у меня задача чуть сложнее: к каждой картинке должна соответствовать определенная мелодия в фоне (способ проигрывания - любой рабочий), т.е. при смене картинок должна меняться и мелодия.

Вообще идеально - чтобы при этом, пользователь мог еще и самостоятельно менять мелодию (не переходя при этом на другую страницу). Плеер могу разместить в любом месте, не обязательно рядом с картинкой.
Все картинок и мелодия около 10-20 (может быть больше).

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

Как лучше такое сделать, и есть ли примеры?

Comments

[havemanyquestions]

А сайт у вас какой: на php (самописный, CMS), SPA?
P.S. Возможно, это поможет - https://stackoverflow.com/questions/24260204/keepi...

[NemuiSaburau]

havemanyquestions, пока делаю самописный на html, если заработает, перенесу потом на CMS

[1210mk2]

Понажимайте на квадрат

здесь

Answer 1

[Сергей c0re]

На чистом CSS Это вряд ли получится сделать, т.к. там нет функций даты и времени, а те что есть CSS 3 Timing Functions предназначены для анимации

сделать разумеется можно на JavaScript
Смотрите функции получения времени

Пример - меняется фон страницы в зависимости от времени суток:

function changeBackground(){
	var h = (new Date()).getHours();
  var b = document.body; 
  if (h > 0 && h < 6) {
  	// ночь
  	img = 'https://images.wallpaperscraft.com/image/moon_branch_night_clouds_48105_1920x1080.jpg';
  } else if (h >=6 && h < 10) {
  	// утро
  	img = 'https://i.artfile.me/wallpaper/11-09-2012/1920x1080/priroda-voshody-zakaty-lug-voshod-utro-t-660656.jpg';
  } else if (h >= 10 && h < 19) {
  	// день
    img = 'https://get.wallhere.com/photo/sunlight-nature-grass-sky-field-horizon-cloud-grassland-meadow-plain-1920x1080-px-prairie-computer-wallpaper-cumulus-573793.jpg';
  } else if (h >= 19) {
  	// вечер
    img = 'https://www.bmwunstoppable.com/wp-content/uploads/2017/03/5nXkqs.jpg';
  }
  b.style = 'background-image: url('+img+')';
  setTimeout(changeBackground, 60000);
}

changeBackground();

PS: Стили (например фон элемента) можно менять через свойство style элемента

el.style = 'background-image: url('+img+')';

контент через свойство .innerHTML
и т.д., смострите свойства и методы DOM (Document Object Model)