Вращение картинки по клику
 

Здравствуйте уважаемые умы. Помогите пожалуйста.Я создал онлайн радио, и на нём нужно сделать так, чтобы при нажатии на кнопку Play начинала крутиться картинка до тех пор, пока не нажмёшь на Pause и тогда картинка переставала крутиться. Буду очень вам благодарен.Ниже код

<div style="text-align: center;">  
<div class="radiocontainer"> 
<div class="radio-block" style="background: url('cover.png') no-repeat;"> 
<div id="jquery_jplayer_1" class="jp-jplayer"></div> 
<div id="jp_container_1" class="jp-audio-stream"> 
<div class="jp-type-single"> 
<div class="jp-gui jp-interface"> 
<ul class="jp-controls"> 
<li><a href="javascript:;" class="jp-play" tabindex="1">Play</a></li> 
<li><a href="javascript:;" class="jp-pause" tabindex="1">Pause</a></li> 
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">Mute</a></li> 
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">Unmute</a></li> 
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">Max volume</a></li> 
</ul> 
<div class="jp-volume-bar"> 
<div class="jp-volume-bar-value"></div> 
</div> 
<div class="jp-current-time"></div>
</div> 
</div> 
</div> 
</div> 
</div> 

</div>

Вращать надо вот эту картинку <div class="radio-block" style="background: url('cover.png') no-repeat;">

Дык!

Логично) Только я с JS совсем не дружу..И как это сделать не понятно..сколько примеров смотрел наяндексив, именно то что мне нужно не нашёл с примерами, везде либо по наведению, либо поворот на время и т.п. По этому написал здесь, думал тут помогут с кодом.

Ты хоть бы денежку какую предложил... Оно может быть и желающие нашлись бы.

У тебя машина есть?
Так вот автомеханики (и не только они) ничего бесплатно вообще не делают. :D
Что же ты нас так не уважаешь?

Представь такой диалог в автосервисе...
- Добрый день, что у вас с лучилось?
- Да вот машина барахлит... Сам я в этом не шарю... Т.ч. приехал к вам, думал вы ее отремонтируете.
- :blink: ???

У меня нет машины..это роскошь для меня. У меня з/п 11к рублей, ипотка,коммунальные,малень кий ребёнок, лишних денег нет. бЫли бы я бы вам и 100к $ дал..

P/s сто раз видел как тут людям бесплатно помогали. Для знающего делов 2мин. Как и писал выше, был бы богат деньгами, одарил бы без проблем. Буду ждать того кто поможет бесплатно, выхода нет.
Ну в край могу последние 100р со счёта телефона перевести.

Это не картинка, а блочный элемент.

Как вращать фоновое изображение лично я в душе не чаю.
Вижу только вариант с выделением этого изображения в отдельный элемент, который будет фоном для всего этого блока.

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

Попробуйте так (элемент с классом .radio-block__bg-image нужно сделать фоном всего блока):

<div style="text-align: center;">  
	<div class="radiocontainer"> 
		<div class="radio-block" style="background: url('cover.png') no-repeat;"> 
			
			<img src="cover.png" class="radio-block__bg-image js-rotatable-image"/>
			
			<div id="jquery_jplayer_1" class="jp-jplayer"></div> 
			<div id="jp_container_1" class="jp-audio-stream"> 
				<div class="jp-type-single"> 
					<div class="jp-gui jp-interface"> 
						<ul class="jp-controls"> 
							<li><a href="javascript:;" class="jp-play js-play-button" tabindex="1">Play</a></li> 
							<li><a href="javascript:;" class="jp-pause js-pause-button" tabindex="1">Pause</a></li> 
							<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">Mute</a></li> 
							<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">Unmute</a></li> 
							<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">Max volume</a></li> 
						</ul> 
						<div class="jp-volume-bar"> 
							<div class="jp-volume-bar-value"></div> 
						</div> 
						<div class="jp-current-time"></div>
					</div> 
				</div> 
			</div> 
		</div> 
	</div> 
</div>
<script>
(function(){
	const img=document.querySelector('.js-rotatable-image');
	const playButton=document.querySelector('.js-play-button');
	const cancelButton=document.querySelector('.js-pause-button');
	const degreePerCall=1;
	
	let isPlays=false;
	let curDegree=0;
	
	[playButton,cancelButton].forEach(function(node,i){
		node && node.addEventListener('click',function(){
			isPlays=!i;
		});
	});
	
	requestAnimationFrame(function rotate(){
		if(isPlays){
			curDegree=(curDegree+degreePerCall)%360;
			img.style.transform='rotate('+curDegree+'deg)';
		};
		
		requestAnimationFrame(rotate);
	});
})();
</script>

Огромное вам спасибо от души искренне.Всё заработало как надо.
Слава богу, что есть на свете ещё такие люди. Дай бог вам всего хорошего.

Nexus,
Скажите пожалуйста, а могли бы вы ещё помочь с тем чтобы эта картинка cover.png и была самой кнопкой Play ?
А то я вот всё вожусь с того момента как вы написали, но что-то не смог так сделать(

Puzzle, элемент с классом:
js-rotatable-image - вращаемый элемент;
js-play-button - элемент, при нажатии на который вращение начнется/продолжится;
js-pause-button - элемент, при нажатии на который вращение прекратится.

На странице может быть только 1 элемент с перечисленными классами (если будет несколько, то браться будет первый попавшийся).

Добавьте изображению еще и класс js-play-button

Уменьшите значение константы degreePerCall (строка 33 в моем коде).

Вот идея с одной кнопкой включения/выключения и вращением диска-картинки...

<button class="radio-controls-play-button"></button>

<script>

document.addEventListener("click", event =>{
	if(event.target.matches(".radio-controls-play-button"))
		event.target.classList.toggle("play");
});

</script>

<style>

.radio-controls-play-button {
	position: relative;
	padding: 1em;
}

.radio-controls-play-button::before {
	content: "";
	background: url(https://is3-ssl.mzstatic.com/image/thumb/Purple118/v4/0c/f5/f4/0cf5f426-a35d-b047-b383-09a4f5e428d6/AppIcon-1x_U007emarketing-85-220-8.png/246x0w.jpg) center / cover;
	width: 10em;
	height: 10em;
	border-radius: 100%;
	display: block;
	animation: 5s rotate linear infinite;
	animation-play-state: paused;
}

.radio-controls-play-button.play::before {
	animation-play-state: running;
}

.radio-controls-play-button::after {
	content: "▶\fe0f";
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: xx-large;
	transform: translate(-50%, -50%);
}
	
.radio-controls-play-button.play::after {
	content: "⏸\fe0f";
}

@keyframes rotate {
	to {
		transform: rotate(1turn);
	}
}

</style>