Форум

Step48_rus · #1 (**permalink**) 08.08.2016, 10:15

Всем добрейшего утра!
Задача такая, есть картинка с ссылкой возьмем к примеру

<a href="#1"><img img="img1.png"></a>

Нужно что бы при нажатии на ссылку, значение #1 менялось на #2,при нажатии на ссылку с #2 менялось на #3, и при нажатии на #3 менялось бы на #4,но при нажатии на #4 менялось бы на #1.
Т.е. при каждом нажатии на ссылку, она меняется значение href, так же нужно,что бы при каждом нажатии на ссылку,картинка,которая внутри этой ссылки,поворачивалось на 20 градусов.

Что бы как то облегчить понимание!
Представите старый телевизор, с крутящимся переключателем, всего каналов 4, адрес каждого канала #1,#2,#3,#4 соответственно, и нужно что бы при нажатии на ручку,менялся канал на 1,и сама ручка поворачивалась.

Ну вот как то так...
Заранее спасибо за ответы, тот кто реально поможет,получит бонус на телефон и +1 в карму!

рони · #2 (**permalink**) 08.08.2016, 11:23

Step48_rus,
ссылку на картинку можно?

Step48_rus · #3 (**permalink**) 08.08.2016, 11:31

рони · #4 (**permalink**) 08.08.2016, 11:38

Step48_rus,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  img {
    transition: all .8s ease-out;
  }

  </style>
</head>

<body>
<a href="#1"><img src="http://demo.mir-360.ru/sov_trad/wp-content/uploads/2016/08/krutilka.png"></a>
<script>

window.addEventListener('DOMContentLoaded', function() {
  var a = document.querySelector('[href="#1"]'), l = 4,i = 0,
  img = a.querySelector('img');
  a.addEventListener('click', function create() {
  a.setAttribute('href', '#'+  (++i% l + 1));
  img.style.transform = 'rotate('+(90*i)+'deg)'
  });
    });
</script>
</body>
</html>

Step48_rus · #5 (**permalink**) 08.08.2016, 11:49

только смотри,поворот кнопки должене быть на 45 градусов,и после 4 ,возвращаться на первую должно

Step48_rus · #6 (**permalink**) 08.08.2016, 11:52

И можно что бы href="#1"
было
onclick="mySwiper.slideTo(1);

рони · #7 (**permalink**) 08.08.2016, 11:55

Сообщение от Step48_rus

только смотри,поворот кнопки должене быть на 45 градусов,и после 4 ,возвращаться на первую должно

не понимаю, посмотрите код снова

рони · #8 (**permalink**) 08.08.2016, 11:59

Сообщение от Step48_rus

onclick="mySwiper.slideTo(1);

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  img {
    transition: all .8s ease-out;
  }

  </style>
</head>

<body>
<a href="#1"><img src="http://demo.mir-360.ru/sov_trad/wp-content/uploads/2016/08/krutilka.png"></a>
<script>

window.addEventListener('DOMContentLoaded', function(event) {
  event.preventDefault();
  var a = document.querySelector('[href="#1"]'), l = 4,i = 0,
  img = a.querySelector('img');
  a.addEventListener('click', function() {
  ++i;
  //mySwiper.slideTo(i % l + 1);
  img.style.transform = 'rotate('+(90*i)+'deg)'
  });
    });
</script>
</body>
</html>

Step48_rus · #9 (**permalink**) 08.08.2016, 12:03

Спасибо!

Step48_rus · #10 (**permalink**) 08.08.2016, 12:04

а как можн ореализовать допустим 5,6,7,8 ,а не 1,2,3,4

Форум

Справочник

Discord чат

Курсы javascript