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

JavaScript для начинающих

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

функция слайдера - JavaScript

14.12.2017, 14:45. Просмотров 144. Ответов 1
Метки нет (Все метки)

народ помогите с функцией... никак не пойму как addEventListener связать с z-index
если можно с построчными коментами... заранее спс !

https://gist.github.com/archivisions/fa2761112bb7d0d0268ce81589646d3a

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
body {
    box-sizing: border-box;
}
 
.slider {
    background-color: rgba(229, 255, 248, 0.28);
    width: 500px;
    height: 500px;
    align-content: center;
    position: relative;
    border: 1px solid black;
}
#previewRed {
     width: 300px;
     height: 400px;
     position: absolute;
     background: red;
     padding: 10px;
     border: 1px solid black;
    text-align: center;
    color: white;
    z-index: 1;
 
 }
#previewYellow {
     width: 300px;
     height: 400px;
     position: absolute;
     background: #fffb1d;
     padding: 10px;
     border: 1px solid black;
    z-index: 2;
 }
#previewGreen {
    width: 300px;
    height: 400px;
    position: absolute;
    background: #5dc35e;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
    color: white;
    z-index: 3;
}
#previewGreen {
    width: 300px;
    height: 400px;
    position: absolute;
    background: #655bc3;
    padding: 10px;
    border: 1px solid black;
    text-align: center;
    color: white;
    z-index: 4;
}
 
 
.contrl {
    position: relative;
    width: 100px;
    height: 400px;
    border: 1px solid rgba(70, 243, 19, 0.58);
    margin-left: 350px;
}
 
#red {
    position: absolute;
    width: 75px;
    height: 75px;
    background: red;
    border: 1px solid black;
    margin: 10px;
    color: white;
}
#yellow {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #fffb1d;
    border: 1px solid black;
    margin: 10px;
    top: 100px;
}
#green {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #5dc35e;
    border: 1px solid black;
    margin: 10px;
    color: white;
    top: 200px;
}
#blue {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #655bc3;
    border: 1px solid black;
    margin: 10px;
    color: white;
    top: 300px;
}
</style>
    
<body>
<div class="slider">
        <div id="previewRed">Red</div>
        <div id="previewYellow">Yellow</div>
        <div id="previewGreen">Green</div>
        <div id="previewBlue">Blue</div>
        <div class="contrl">
            <button id="red">Red</button>
            <button id="yellow">Yellow</button>
            <button id="green">Green</button>
            <button id="blue">Blue</button>
        </div>
</div>
<script src="script.js"></script>
</body>
</html>
Добавлено через 19 часов 2 минуты
#previewBlue на 52й строчке...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.12.2017, 14:45
Я подобрал для вас темы с готовыми решениями и ответами на вопрос функция слайдера (JavaScript):

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

Движение слайдера - JavaScript
Нужно сделать вот такой слайдер, чтобы при нажатии на &quot;лето&quot; или &quot;зима&quot; красный фон переезжал на нужную позицию.

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

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

Простейший скрипт слайдера - JavaScript
ПОМОГИТЕ, ПОЖАЛУЙСТА!!! Помогите мне изменить скрипт. class=&quot;left-pointer&quot; и class=&quot;Right-pointer&quot; это кнопки, их надо привязать к скрипту....

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

1
renat_dmitriev
182 / 182 / 56
Регистрация: 26.08.2016
Сообщений: 615
20.12.2017, 12:25 #2
Цитата Сообщение от 3dartmax Посмотреть сообщение
никак не пойму как addEventListener связать с z-index
Загадочная фраза. Поясните что она означает...Вы хотите назначить одно событие элементам с одинаковыми z-index? Только перебором всех элементов DOM и проверкой свойства style.zIndex, но это глупо.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.12.2017, 12:25
Привет! Вот еще темы с ответами:

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

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

Как убрать фон у слайдера? - JavaScript
Здравствуйте! Скачал какой то скрипт на слайдер изображений, подогнал по размерам, но проблема светло-серый фон что у слайдера никак не...

Проблемы при работе слайдера - JavaScript
Доброго времени суток! Помогите пожалуйста решить делему с JavaScript слайдером. Вот страничка слайдера...


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

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

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