Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

Карусель фотографий

CSS HTML JavaScript Библиотека JS
Для одной своей идеи, использовал карусель фотографий, взятую из интернета и переписанную под себя. Выложу, как было у меня. Карусель использует библиотеку jQuery, так что придется подключать её, хотя, переписать на чистый JavaScript не составит особого труда.

jQuery:
Выделить
var carouselID = 1, change = 8000;

function carouselStart() {
	if ($('div[data-carousel="carousel"]').length < 1) {
		return false;
	};

	$('div[data-carousel="carousel"]').each(function() {
		$(this).removeAttr('data-carousel').attr('id', 'carousel_' + carouselID);
		carousel('#carousel_' + carouselID);
		carouselID++;
	});
};

$(() => {
	carouselStart();
	window.setInterval(carouselStart, 3000);
});

function carousel(carouselID) {
	var $slr, $sls, interval, $selectors, $btns, currentIndex, nextIndex;
	var cycle = index => {
		var $currentSlide, $nextSlide, $currentSelector, $nextSelector;
		nextIndex        = index !== undefined ? index : nextIndex;
		$currentSlide    =
...

JS: Метод массива forEach()

JavaScript Функция
Метод forEach() перебирает все элементы массива. В качестве параметра используется функция, которая будет работать с каждыми элементом массива.

Пример:
Выделить
const n = [1, 2, 3, 4, 5]

n.forEach(function(num) {
	alert(num);
});
...

Магический метод __call(): Вызов при недоступных методов

PHP
Магический метод __call() запускается при попытке обращения к несуществующему/недоступному методу:
Выделить
	public function __call($name, $arguments)
	{
		echo 'Метод: ' . $name . ' не найден.';
	}

Мои два метода (installation и update) были похоже друг с другом, за исключением деталей, я решил их объединить, в один, при этом обращение к методам должно было остаться прежним:
Выделить
$class->installation();
$class->update();

С решением этой задачи мне помог магический метод __call():
Выделить
	// Установка | Обновление
	public function __call(string $name, array $arguments)
	{
		// Проверка: Если вызываемый метод не: installation, или не: update, то функция вернёт null 
		if (!in_array($name, ['installation', 'update']))
		{
			return null;
		}

		// Код функции
	} // End: Установка | Обновление
...

Остановка текущего воспроизведения, при включении другого проигрывателя

JavaScript Библиотека JS
Стояла задача: Поставить на паузу аудио проигрыватель, что играет в данный момент, при включении другого проигрывателя. Решение было найдено в интернете, выглядит чистый JS так:
Выделить
// Остановка текущего аудио плеера, при включении другого
window.addEventListener('play', function(unit) {
    if (window.playing && window.playing != unit.target) {
        window.playing.pause();
    };

    window.playing = unit.target;
}, true); // End: Остановка текущего аудио плеера, при включении другого

jQuery выглядит так:
Выделить
// Остановка текущего аудио плеера, при включении другого
$('audio').on('play', function() {
	$('audio').not(this).each(function(index, audio) {
		audio.pause();
	});
}); // End: Остановка текущего аудио плеера, при включении другого

Опробовал. При динамическом добавлении проигрывателя, работает тоже....

Псевдокласс :hover в атрибуте style (CSS | HTML | JS)

CSS HTML JavaScript
Появилась задача изменить стиль элемента при наведении курсора и вернуть прежний стиль, когда курсор увели. Для решения этой задачи существует псевдокласс :hover, при помощи, которого можно решить задачу, но дело в том, что стиль элемента находится в атрибуте style элемента, например:
Выделить
<span style="color: #CCCCCC;">Текст</span>

В него же необходимо вставить :hover, но делать этого конечно нельзя. Необходимо искать другой вариант решения, а вариантом вполне может быть - использование атрибутов событий: onMouseOver и onMouseOut:
  • onMouseOver - Выполняется, при наведении курсора.
  • onMouseOut - Выполняется, при выходи курсора за пределы элемента.

Делаем так:
Выделить
<span style="color: #CCCCCC;" 
    onMouseOver="this.style.color = '#999999';"
    onMouseOut="this.style.color = '#CCCCCC';">
        Текст
</span>

Готово. Задача решена, теперь цвет текста меняется при наведении курсора и возвращается в прежний цвет, когда курсор убегает....
Реклама