Slider.js

var massivabout = [
{
  "imgID": 0,
  "imgName": "Ул. Гагарина",
  "imgInfo": "Улица Гагарина - одна из небольших центральных улиц Омска, расположенная в историческом районе города. Большая часть построек представляет культурную и историческую ценность. На улице располагается Администрация города Омска, а также Госпиталь для ветеранов, ТК «Летур» и Омский автотранспортный колледж.",
},
{
  "imgID": 1,
  "imgName": "Драм. Театр",
  "imgInfo": "Омский государственный академический театр драмы - крупнейший и старейший российский академический драматический театр в Сибири. Символ омской театральной драмы. Кузница плеяды выдающихся мастеров театрального и кинематографического искусства советского и российского времени.",
},
{
  "imgID": 2,
  "imgName": "Ул. Ленина",
  "imgInfo": "Улица Ленина - центральная улица города Омска, расположенная в районе исторической застройки. Здесь сохранился единственный в своём роде архитектурный ансамбль конца XIX — начала XX вв., получивший статус исторического памятника федерального значения и являющийся достопримечательностью города. В праздничные дни движение транспорта по улице Ленина перекрывается для народных гуляний.",
},
{
  "imgID": 3,
  "imgName": "Фрунзенский мост",
  "imgInfo": "Фрунзенский мост расположился на стыке улиц маршала Жукова и Фрунзе. Этот мост был возведен в период 1987-1988 годов. Данный мост обладает достаточно большой пропускной способностью, что становится возможным благодаря трехполосному движению в одну сторону. Именно такое количество полос создатели моста посчитали наиболее оптимальным и не ошиблись, ведь для города «миллионника» было не разумно строить меньшее количество полос."
},
{
  "imgID": 4,
  "imgName": "Просто Омск",
  "imgInfo": "Просто очаровательный вечерний заснеженный Омск.",
},
{
  "imgID": 5,
  "imgName": "Метромост",
  "imgInfo": "Метромост имени 60-летия Победы — совмещённый автомобильный и метромост через реку Иртыш в городе Омске. Строительство моста началось в 1993 году, тогда была забита первая свая. Однако вплоть до конца 2000 года, пока большая часть средств выделялась из федерального бюджета, строительство продвигалось очень медленно из-за нехватки финансирования.",
},
{
  "imgID": 6,
  "imgName": "Скульптура «Марафонец»",
  "imgInfo": "Идея памятника принадлежит двум омским скульпторам, постоянным участникам омских марафонов Г. Чиркину и И. Бухарцеву. Воплотил замысел московский скульптор В. Кириллов. По замыслу автора, спортсмен бежит по символической дорожке, которая, как космическая орбита, устремляется вверх и превращается в финишную ленту на груди бегуна.",
},
{
  "imgID": 7,
  "imgName": "Ул. Ленина",
  "imgInfo": "Улица Ленина - центральная улица города Омска, расположенная в районе исторической застройки. Здесь сохранился единственный в своём роде архитектурный ансамбль конца XIX — начала XX вв., получивший статус исторического памятника федерального значения и являющийся достопримечательностью города. В праздничные дни движение транспорта по улице Ленина перекрывается для народных гуляний.",
},
{
  "imgID": 8,
  "imgName": "Ул. Ленина",
  "imgInfo": "Улица Ленина - центральная улица города Омска, расположенная в районе исторической застройки. Здесь сохранился единственный в своём роде архитектурный ансамбль конца XIX — начала XX вв., получивший статус исторического памятника федерального значения и являющийся достопримечательностью города. В праздничные дни движение транспорта по улице Ленина перекрывается для народных гуляний.",
},
{
  "imgID": 9,
  "imgName": "Юбилейный мост",
  "imgInfo": "Юбилейный мост - мост через реку Омь, расположенный в центре города Омска. Является одной из «визитных карточек» города, с него открывается живописный вид на историческую застройку, а в праздничные дни Юбилейный становится полностью пешеходным и через него проходят десятки тысяч людей.",
},
{
  "imgID": 10,
  "imgName": "Ул. Ленина",
  "imgInfo": "Улица Ленина - центральная улица города Омска, расположенная в районе исторической застройки. Здесь сохранился единственный в своём роде архитектурный ансамбль конца XIX — начала XX вв., получивший статус исторического памятника федерального значения и являющийся достопримечательностью города. В праздничные дни движение транспорта по улице Ленина перекрывается для народных гуляний.",
},
{
  "imgID": 11,
  "imgName": "Ул. Ленина",
  "imgInfo": "Улица Ленина - центральная улица города Омска, расположенная в районе исторической застройки. Здесь сохранился единственный в своём роде архитектурный ансамбль конца XIX — начала XX вв., получивший статус исторического памятника федерального значения и являющийся достопримечательностью города. В праздничные дни движение транспорта по улице Ленина перекрывается для народных гуляний.",
},
{
  "imgID": 12,
  "imgName": "Набережная Тухачевского",
  "imgInfo": "Бывшее место расположения Омской крепости.",
},
{
  "imgID": 13,
  "imgName": "Успенский собор",
  "imgInfo": "Свято-Успенский кафедральный собор — действующий собор, один из наиболее посещаемых храмов Омска, находящийся в самом центре города на Соборной площади. Достопримечательность Омска. Был разрушен во времена советской власти и восстановлен в начале XXI века на средства, специально собранные горожанами.",
},
{
  "imgID": 14,
  "imgName": "Успенский собор",
  "imgInfo": "Свято-Успенский кафедральный собор — действующий собор, один из наиболее посещаемых храмов Омска, находящийся в самом центре города на Соборной площади. Достопримечательность Омска. Был разрушен во времена советской власти и восстановлен в начале XXI века на средства, специально собранные горожанами.",
},
{
  "imgID": 15,
  "imgName": "Центр города",
  "imgInfo": "Прекрасный вечерний центр города при свете огней.",
},
{
  "imgID": 16,
  "imgName": "Успенский собор",
  "imgInfo": "Свято-Успенский кафедральный собор — действующий собор, один из наиболее посещаемых храмов Омска, находящийся в самом центре города на Соборной площади. Достопримечательность Омска. Был разрушен во времена советской власти и восстановлен в начале XXI века на средства, специально собранные горожанами.",
},
{
  "imgID": 17,
  "imgName": "Метромост",
  "imgInfo": "Метромост имени 60-летия Победы — совмещённый автомобильный и метромост через реку Иртыш в городе Омске. Строительство моста началось в 1993 году, тогда была забита первая свая. Однако вплоть до конца 2000 года, пока большая часть средств выделялась из федерального бюджета, строительство продвигалось очень медленно из-за нехватки финансирования.",
},
{
  "imgID": 18,
  "imgName": "Музей им. Врубеля",
  "imgInfo": "Омский областной музей изобразительных искусств имени М. А. Врубеля — музей в Омске, Россия. Один из крупнейших в Сибири, его художественное собрание включает коллекции зарубежного и русского искусства от античности до наших дней.",
},
{
  "imgID": 19,
  "imgName": "Драм. Театр",
  "imgInfo": "Омский государственный академический театр драмы - крупнейший и старейший российский академический драматический театр в Сибири. Символ омской театральной драмы. Кузница плеяды выдающихся мастеров театрального и кинематографического искусства советского и российского времени.",
}];

var sframe;  
var size_info; 
var timer;
var slider = {
	frame:Math.floor(Math.random() * (massivabout.length - 0 + 0)) + 0, // Рандомная картинка 
	set: function(image) { // установка нужного фона 
		document.body.style.backgroundImage = "url(img/img"+image+".jpg)";
		aboutpoint(image);
	},
	init: function() { // запуск слайдера с рындомной картинкой
		this.set(this.frame);
		sframe = this.frame; // присваиваем глобальной перменнеой значение фрейма
	},
	left: function() { // крутим на один кадр влево
		this.frame--;
		if(this.frame < 0) this.frame = massivabout.length-1;
		this.set(this.frame);
		sframe = this.frame;
	},
	right: function() { // крутим на один кадр вправо
		this.frame++;
		if(this.frame > massivabout.length - 1) this.frame = 0;
		this.set(this.frame);
		sframe = this.frame;		
	}
};

window.onload = function() { // запуск слайдера после загрузки документа
	slider.init();
	
	//canvas init
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	//canvas dimensions
	var W = window.innerWidth;
	var H = window.innerHeight;
	canvas.width = W;
	canvas.height = H;
	
	//snowflake particles
	var mp = 200; //max particles
	var particles = [];
	for(var i = 0; i < mp; i++)
	{
		particles.push({
			x: Math.random()*W, //x-coordinate
			y: Math.random()*H, //y-coordinate
			r: Math.random()*4+1, //radius
			d: Math.random()*mp //density
		})
	}
	
	//Lets draw the flakes
	function draw()
	{
		ctx.clearRect(0, 0, W, H);
		
		ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
		ctx.beginPath();
		for(var i = 0; i < mp; i++)
		{
			var p = particles[i];
			ctx.moveTo(p.x, p.y);
			ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
		}
		ctx.fill();
		update();
	}
	
	//Function to move the snowflakes
	//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
	var angle = 0;
	function update()
	{
		angle += 0.01;
		for(var i = 0; i < mp; i++)
		{
			var p = particles[i];
			//Updating X and Y coordinates
			//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
			//Every particle has its own density which can be used to make the downward movement different for each flake
			//Lets make it more random by adding in the radius
			p.y += Math.cos(angle+p.d) + 1 + p.r/2;
			p.x += Math.sin(angle) * 2;
			
			//Sending flakes back from the top when it exits
			//Lets make it a bit more organic and let flakes enter from the left and right also.
			if(p.x > W+5 || p.x < -5 || p.y > H)
			{
				if(i%3 > 0) //66.67% of the flakes
				{
					particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
				}
				else
				{
					//If the flake is exitting from the right
					if(Math.sin(angle) > 0)
					{
						//Enter from the left
						particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
					}
					else
					{
						//Enter from the right
						particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
					}
				}
			}
		}
	}
	
	//animation loop
	setInterval(draw, 33);
};


		function menu_vis(){
		var menu = document.getElementsByClassName("menu")[0];  //Присваиваем переменной menu меню элемент
		var docmen = document.getElementsByClassName("men")[0]; // Присваиваем переменной docmen мен элемент
		if (docmen.style.display != "inline-block")	{
				menu.style.border = "1px solid white";
				docmen.style.display = "inline-block";}
				else
				{	menu.style.border = "none";
					docmen.style.display = "none";}
			};
			
		function pause(){	//Пауза и плей на слайдер
			var pause_button = document.getElementsByClassName("pause_play")[0];
			if (!timer) {pause_button.innerHTML='PAUSE';
			pause_button.style.border = "1px solid white";
			timer = setInterval(function() {
				slider.right();
			},5000);}
			else {
				pause_button.innerHTML='PLAY';
			pause_button.style.border = "none";
			timer = clearInterval(timer);	// останавливаем автоматическую прокрутку
			}	
		};
		
		function aboutpoint(i){	//Вывод описания места
			var name_h = document.getElementsByClassName("metro")[0];
			var info_h = document.getElementsByClassName("name")[0];
			var name = massivabout[i].imgName;
			var info = massivabout[i].imgInfo;
				name_h.innerHTML = name;
				if (size_info == 1){
				info_h.getElementsByTagName("div")[0].innerHTML = info;}
				
		}
		
		function resize_block(){ //Изменение размера блока metro
			var name = document.getElementsByClassName("name")[0];
			var elements_center = document.getElementsByClassName("content-center")[0];
			var logo = elements_center.getElementsByTagName("img")[0];
			var name_omsk = elements_center.getElementsByTagName("h1")[0];
			var name_point = document.getElementsByClassName("metro")[0];
			if (size_info !=1){
			size_info = 1;
			logo.style.display  = "none";
			name_omsk.style.display = "none";
			name.style.display = "";
			name.style.width = "48.88888888888889%";
			name_point.style.display = "block";
			name_point.style.width = "45.83333333333333%";
			name.style.height = "50.37783375314861%";
			name.style.border = "0px";
			name.getElementsByTagName("div")[0].style.display = "table-cell";
			aboutpoint(sframe); // записываем данные о месте в блок
			}
			else{
			size_info = 0;
			logo.style.display  = "";
			name_omsk.style.display = "";
			name.style.display = "none";
			name_point.style.display = "";
			name_point.style.border = "2px solid white";
			}

		}	

		function mute(){
		var mute_button = document.getElementById("mute_button");
		var music = document.getElementById("music");
		if (music.volume != 0.0) {
			music.volume = 0.0;
			mute_button.src="img/mute.png"
		}
		else {
			music.volume = 1.0;
			mute_button.src="img/volume.png"
		}	
		}