Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
d1stur8ed
0 / 0 / 0
Регистрация: 24.04.2016
Сообщений: 27
#1

Движение слайдера - JavaScript

21.10.2016, 11:26. Просмотров 134. Ответов 7
Метки нет (Все метки)

Нужно сделать вот такой слайдер, чтобы при нажатии на "лето" или "зима" красный фон переезжал на нужную позицию.
0
Миниатюры
Движение слайдера  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.10.2016, 11:26
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Движение слайдера (JavaScript):

Установка слайдера - JavaScript
Доброго дня, хочу попросить помощи у знающих людей, не могу установить слайдер, если вам конечно не тяжено. Вот этот слайдер...

Добавление слайдера - JavaScript
Добрый вечер. Никогда с JS и JQ дела не имел. Сейчас верстаю с макета psd и на нем имеется слайдер вот такого типа: Обьясните...

Автоматическая прокрутка слайдера - JavaScript
Как сделать автоматическую прокрутку слайдера? Я не пойму что здесь за нее отвечает. Хромают знания Js. И еще хотелось бы узнать как из...

Адаптивность слайдера в браузере - JavaScript
Всем привет! Сразу скажу, с Javascript особо не дружу, не выучил еще так сказать. Но некоторое знаю. У меня такая проблема, поставил на...

По поводу слайдера (карусельки) - JavaScript
посоветуйте, пожалуйста, способы создания такого слайдера?

Два слайдера на странице - JavaScript
Добрый день, есть готовый шаблон, купленный на сайте. Прикручен модуль Bang2Joom Alfheim Gallery Pro. Когда на странице один модуль со...

7
Balanaar
699 / 640 / 241
Регистрация: 11.07.2016
Сообщений: 1,963
21.10.2016, 11:29 #2
Вы просите нас выполнить разметку, описать стили и запрограммировать поведение слайдера с нуля? Всего лишь? Давайте уж сразу ключи от сайта. Мы вам его накатаем по-быстрому. И ТЗ составьте
0
d1stur8ed
0 / 0 / 0
Регистрация: 24.04.2016
Сообщений: 27
21.10.2016, 11:34  [ТС] #3
не нужно делать разметку и описывать стили, просто скажите как сделать чтобы фот ездил
0
Balanaar
699 / 640 / 241
Регистрация: 11.07.2016
Сообщений: 1,963
21.10.2016, 11:38 #4
d1stur8ed, нужно написать программу.
Серьезно. Каков вопрос - таков ответ. Невозможно сказать конкретнее без конкретики с вашей стороны

Добавлено через 1 минуту
Загляните в остальные темы. Там люди коды скидывают, спрашивают что не так, делают догадки. Вот им одно удовольствие помогать
0
d1stur8ed
0 / 0 / 0
Регистрация: 24.04.2016
Сообщений: 27
21.10.2016, 12:08  [ТС] #5
Хорошо, вот верстка
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title></title>
  <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
 
<body>
 
    <div class="switch">
        <div class="Leto">
            <a id="a-leto">Лето</a>
        </div>
        <div class="Zima">
            <a id="a-zima">Зима</a>
        </div>
    </div>
 
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.switch {
    width:250px;
    height:40px;
    border:2px solid #727272;
    border-radius:30px;
}
#a-leto {
    width:123px;
    height:40px;
    float:left;
    text-align:center;
    padding-top:10px;
    background:#ff5235;
    border-radius:25px;
    box-sizing:border-box;
}
#a-zima{
    float:right;
    width:123px;
    height:40px;
    text-align:center;
    padding-top:10px;
    border-radius:25px;
    box-sizing:border-box;
    
}
Как сделать так, чтобы при нажатии на "Зима" красный фот переехал на зиму, и аналогично с летом и менялся цвет текста
0
Balanaar
699 / 640 / 241
Регистрация: 11.07.2016
Сообщений: 1,963
21.10.2016, 12:27 #6
Javascript
1
2
3
4
5
6
$(document).ready(function(){
    $('.switch a').click(function() {
        $('.switch a').css('background', 'none');
        $(this).css('background', '#ff5235');
    });
});
Если хотите анимацию - все становится в разы сложнее
0
mrtoxas
Модератор
Эксперт HTML/CSS
2423 / 1741 / 971
Регистрация: 12.07.2015
Сообщений: 4,741
Записей в блоге: 3
21.10.2016, 12:31 #7
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Можно вообще без js
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .wrapper {
      width: 250px;
      height: 40px;
      border: 2px solid black;
      position: relative;
      background: black;
      border-radius: 30px;
    }
    #chkWeather {
      display: none;
    }
    .block {
      position: absolute;
      top: 0;
      left: 0;
      right: 50%;
      height: 100%;
      border-radius: 30px;
      background: red;
      transition: .2s;
      display: inline-block;
    }
    .summer,
    .winter {
      position: absolute;
      height: 100%;
      width: 50%;
      text-align: center;
      line-height: 40px;
      color: white;
      z-index: 5;
    }
    .summer {
      left: 0;
    }
    .winter {
      right: 0;
    }
    #chkWeather:checked ~.block {
      transform: translateX(100%);
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <input type="checkbox" id="chkWeather" name="bl" />
    <label class="summer" for="chkWeather">Лето</label>
    <label class="winter" for="chkWeather">Зима</label>
    <div class="block"></div>
  </div>
</body>
</html>
Результат
1
d1stur8ed
0 / 0 / 0
Регистрация: 24.04.2016
Сообщений: 27
21.10.2016, 12:37  [ТС] #8
Вот именно оно и должно быть анимацией, как это сделать, я понятия не имею

Я вставил этот js код перед закрытием боди, но ничего не происходит, может не туда вставил?

Добавлено через 2 минуты
mrtoxas, вот, именно так, осталось разобраться как это работает)
Спасибо большое!
0
21.10.2016, 12:37
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.10.2016, 12:37
Привет! Вот еще темы с ответами:

Сделать автопрокрутку для слайдера - JavaScript
Здравствуйте! Помогите пожалуйста с автопрокруткой слайдера На моем сайте есть файл simple.js его содержимое var ls = ls || {};...

интервал между переключениями слайдера - JavaScript
есть слайдер переключалка по истечении определенного времени он переключает картинку и текст к ней. при открытии страницы первый...

Слишком быстрая прокрутка слайдера - JavaScript
Здравствуйте. Слайдер слишком быстро прокручивает изображения. Менял параметры delay и speed, но в итоге всё ровно листает с такой же...

Остановка слайдера при нажатии - JavaScript
Здравствуйте! Нужен слайдер, который автоматически листает слайды и при нажатии на слайд приостанавливается. Может есть у кого-то такой,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru