Как заставить крутиться картинку по клику
Ребят, помогите пожалуйста, совсем не силён в JS.
Есть сайт ССЫЛКА нужно сделать так чтобы при нажатии на фотку трека (она же кнопка Play), эта фотка у этого трека начинала крутиться по часовой стрелке, при нажатии ещё раз (ставится на Pause) перестаёт крутиться (Желательно бы чтобы принимала исходное положение, но это по возможности и не так важно). Что не пробовал делать, крутится только одна первая картинка..уже час вожусь голова поехала( |
<style>
img {
display: inline-block;
width: 60px;
height: 60px;
background: gray;
border-radius: 50%;
}
.play-button--playing img {
animation: spin 4s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const buttons = document.querySelectorAll(".play-button");
const NOW_PLAYING_CLASS_NAME = "play-button--playing";
buttons.forEach(node => {
node.addEventListener("click", e => {
e.preventDefault();
const isNowPlaying = node.classList.contains(NOW_PLAYING_CLASS_NAME);
buttons.forEach(button => {
button.classList.toggle(NOW_PLAYING_CLASS_NAME, !isNowPlaying && node === button);
});
});
});
});
</script>
<a href="#" class="play-button"><img src="" alt="img-1"></a>
<a href="#" class="play-button"><img src="" alt="img-2"></a>
<a href="#" class="play-button"><img src="" alt="img-3"></a>
|
Ну разные варианты я находил на просторах интернета..так то всё понятно когда по чистому..а вот к своему сайту не могу примерить..Пытался ваш пример под себя подстроить, абракадабра получилась со всеми картинками на сайте ну и ничего не вращалось(
|
Цитата:
|
Не на ту ссылку (тег a) класс play-button повесили.
Скрипт достаточно вставить на страницу 1 раз, а не по экземпляру на каждую кнопку. |
Цитата:
|
Цитата:
<!-- Трек №{news-id} -->
<div class="wmbox_home"><span class="cifra">{post-custom-id}</span>
<div class="ti">
<a href="javascript:ShowOrHide('prosl-{news-id}')"><img src="https://****"/>
<a id="Player{news-id}" class="iplay" data-player="https://***" data-title="{title}" data-reads="https://***/down.php?id={news-id}" data-id="{news-id}" data-idn="play{news-id}" data-nextplay="true"></a>
</div>
<ul class="ti">
<li><h1 class="heading"><strong> [full-link] {title}[/full-link]</strong></h1></li>
<li>Добавлено: {date}</li>
</ul>
</a>
</div>
<!-- Конец трека №{news-id} --
А сам файл 1 выводится в файле 2 в кратце вот так
<div class="outer_stata">
<div class="middle_stata">
<div class="inner_stata">
{content}
</div>
</div>
</div>
получается как бы файл 1 это один трек |
Puzzle, дело не в том, что "за бесплатно никто не помогает", а в том, что вам показали рабочий код, который решает вашу проблему.
Вам осталось только разместить код на своей странице и добавить нужной ссылке в разметке класс `play-button`, всё. В прошлый раз когда я смотрел, вы этот класс добавили не той кнопке. У вас, какого-то фига, на каждый элемент идет по 2 ссылке: одна с картинкой внутри; другая, видимо, для воспроизведения аудио. Для начала поправьте ваш html-код, потому что сейчас он содержит ошибку:
<!-- Трек №{news-id} -->
<div class="wmbox_home"><span class="cifra">{post-custom-id}</span>
<div class="ti">
*!*
<a href="javascript:ShowOrHide('prosl-{news-id}')">
*/!*
<img src="https://****" />
<a
id="Player{news-id}"
class="iplay"
data-player="https://***"
data-title="{title}"
data-reads="https://***/down.php?id={news-id}"
data-id="{news-id}"
data-idn="play{news-id}"
data-nextplay="true"
></a>
</div>
<ul class="ti">
<li>
<h1 class="heading"><strong> [full-link] {title}[/full-link]</strong></h1>
</li>
<li>Добавлено: {date}</li>
</ul>
*!*
</a>
*/!*
</div>
<!-- Конец трека №{news-id} --
Как разберетесь с ошибками, уберете лишнее, может быть придете к чему-то похожему:
<!-- Трек №{news-id} -->
<div class="wmbox_home"><span class="cifra">{post-custom-id}</span>
<div class="ti">
<a
id="Player{news-id}"
class="iplay *!*play-button*/!*"
data-player="https://***"
data-title="{title}"
data-reads="https://***/down.php?id={news-id}"
data-id="{news-id}"
data-idn="play{news-id}"
data-nextplay="true"
>
<img src="https://****" />
</a>
</div>
<div class="ti">
<div>
<h1 class="heading"><strong>[full-link]{title}[/full-link]</strong></h1>
</div>
<div>Добавлено: {date}</li>
</div>
</div>
<!-- Конец трека №{news-id} --
|
Puzzle, если у вас так ничего и не выйдет и вы по прежнему будете готовы заплатить за работу, то создайте новый топик в разделе "Работа".
|
Ну крутиться то картинку по вашему методу я смог ещё изначально..проблема в том, что если делать чтобы картинка крутилась вашим методом, то у меня пропадают png кнопки плей и пауза которые поверх обложки трека и крутится картинка только при обновлении страницы.А при работе AJAX перестаёт..к примеру крутится у одного трека картинка, перехожу к другому треку и там уже не крутится..вот к примеру тут посмотрите ССЫЛКА а должно быть как на главной, при наведении на обложку появляется картинка прозрачная Play при нажатии трек играет и светится прозраным Pause..пока эксперементирую с крутящейся обложкой отдельно для трека одного
|
| Часовой пояс GMT +3, время: 01:49. |