| Step48_rus | 08.08.2016 11:31 |
Ссылка и картинка
Всем добрейшего утра!
Задача такая, есть картинка с ссылкой возьмем к примеру <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 в карму! |
Step48_rus,
ссылку на картинку можно? |
|
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>
|
только смотри,поворот кнопки должене быть на 45 градусов,и после 4 ,возвращаться на первую должно
|
И можно что бы href="#1"
было 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>
|
Спасибо!
|
а как можн ореализовать допустим 5,6,7,8 ,а не 1,2,3,4
|
| Часовой пояс GMT +3, время: 09:29. |