0 / 0 / 0
Регистрация: 30.11.2015
Сообщений: 5
1

Как сделать отдельное переключение картинок в блоке?

01.12.2015, 00:22. Показов 956. Ответов 0
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Как сделать отдельное переключение картинок в блоке? Нужно чтобы 3 слайдера переключались независимо друг от друга!
http://jsfiddle.net/a068hw55/333/
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
                <div class="bl-1">
                
                
                
                
                
                
                
                        <div class="wrappers-1">
    <input type="radio" name="point" id="slide1-1" checked>
    <input type="radio" name="point" id="slide2-1">
    <input type="radio" name="point" id="slide3-1">
    <input type="radio" name="point" id="slide4-1">
    <input type="radio" name="point" id="slide5-1">
    <div class="slider-1">
        <div class="slides-1 slide1-1"></div>
        <div class="slides-1 slide2-1"></div>
        <div class="slides-1 slide3-1"></div>
        <div class="slides-1 slide4-1"></div>
        <div class="slides-1 slide5-1"></div>
    </div>  
    <div class="controls-1">
        <label for="slide1-1"></label>
        <label for="slide2-1"></label>
        <label for="slide3-1"></label>
        <label for="slide4-1"></label>
        <label for="slide5-1"></label>
    </div>
</div>
                
                
                
                
                
                </div>
                <div class="bl-2">
                
                
                        <div class="wrappers-2">
    <input type="radio" name="point" id="slide1-2" checked>
    <input type="radio" name="point" id="slide2-2">
    <input type="radio" name="point" id="slide3-2">
    <input type="radio" name="point" id="slide4-2">
    <input type="radio" name="point" id="slide5-2">
    <div class="slider-2">
        <div class="slides-2 slide1-2"></div>
        <div class="slides-2 slide2-2"></div>
        <div class="slides-2 slide3-2"></div>
        <div class="slides-2 slide4-2"></div>
        <div class="slides-2 slide5-2"></div>
    </div>  
    <div class="controls-2">
        <label for="slide1-2"></label>
        <label for="slide2-2"></label>
        <label for="slide3-2"></label>
        <label for="slide4-2"></label>
        <label for="slide5-2"></label>
    </div>
</div>
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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
    .bl-1 {
        border: solid 1px #000;
        width: 290px;
        height:315px;
        float:left;
    }
.bl-2{
        border: solid 1px #000;
        width: 290px;
        height:315px;
        float: left;
        margin-left:10px;
}
.bl-3{
        border: solid 1px #000;
        width: 290px;
        height:315px;
        margin-left:610;
}
 
    
    
    
    
    
    
    
    
    
    
    
/*первый мини слайдер*/
    .wrappers-1 {
    height: 290px;
    position: relative;
    width: 290px;
}
 
.slider-1 {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
 
.slides-1 {
    height: inherit;
    opacity: 0;
    position: absolute;
    width: inherit;
    z-index: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
 
.slide1-1 { background-image: url([url]http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg);[/url] }
.slide2-1 { background-image: url([url]http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg);[/url] }
.slide3-1 { background-image: url([url]http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg);[/url] }
.slide4-1 { background-image: url([url]http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg);[/url] }
.slide5-1 { background-image: url([url]http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg);[/url] }
 
#slide1-1:checked ~ .slider-1> .slide1-1,
#slide2-1:checked ~ .slider-1 > .slide2-1,
#slide3-1:checked ~ .slider-1 > .slide3-1,
#slide4-1:checked ~ .slider-1 > .slide4-1,
#slide5-1:checked ~ .slider-1 > .slide5-1 {
    opacity: 1;
    z-index: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
 
.wrappers-1 > input {
    display: none;
}
 
.wrappers-1 .controls-1 {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}
 
.wrappers-1 label {
    cursor: pointer;
    display: inline-block;
    height: 8px;
    margin: 9px 12px 0 16px;
    position: relative;
    width: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background ease-in-out .5s;
    -moz-transition: background ease-in-out .5s;
    -o-transition: background ease-in-out .5s;
    transition: background ease-in-out .5s;
}
 
.wrappers-1 label:hover, 
#slide1-1:checked ~ .controls-1 label:nth-of-type(1),
#slide2-1:checked ~ .controls-1 label:nth-of-type(2),
#slide3-1:checked ~ .controls-1 label:nth-of-type(3),
#slide4-1:checked ~ .controls-1 label:nth-of-type(4),
#slide5-1:checked ~ .controls-1 label:nth-of-type(5) {
    background: #ddd;
}
 
.wrappers-1 label:after {
    border: 2px solid #ddd;
    content: " ";
    display: block;
    height: 12px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
/*Второй мини слайдер*/
    .wrappers-2 {
    height: 290px;
    position: relative;
    width: 290px;
}
 
.slider-2 {
    height: inherit;
    overflow: hidden;
    position: relative;
    width: inherit;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
 
.slides-2 {
    height: inherit;
    opacity: 0;
    position: absolute;
    width: inherit;
    z-index: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
    transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}
 
.slide1-2 { background-image: url([url]http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg);[/url] }
.slide2-2 { background-image: url([url]http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg);[/url] }
.slide3-2 { background-image: url([url]http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg);[/url] }
.slide4-2 { background-image: url([url]http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg);[/url] }
.slide5-2 { background-image: url([url]http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg);[/url] }
 
#slide1-2:checked ~ .slider-2> .slide1-2,
#slide2-2:checked ~ .slider-2 > .slide2-2,
#slide3-2:checked ~ .slider-2 > .slide3-2,
#slide4-2:checked ~ .slider-2 > .slide4-2,
#slide5-2:checked ~ .slider-2 > .slide5-2 {
    opacity: 1;
    z-index: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
 
.wrappers-2 > input {
    display: none;
}
 
.wrappers-2 .controls-2 {
    left: 50%;
    margin-left: -98px;
    position: absolute;
}
 
.wrappers-2 label {
    cursor: pointer;
    display: inline-block;
    height: 8px;
    margin: 9px 12px 0 16px;
    position: relative;
    width: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background ease-in-out .5s;
    -moz-transition: background ease-in-out .5s;
    -o-transition: background ease-in-out .5s;
    transition: background ease-in-out .5s;
}
 
.wrappers-2 label:hover, 
#slide1-2:checked ~ .controls-2 label:nth-of-type(1),
#slide2-2:checked ~ .controls-2 label:nth-of-type(2),
#slide3-2:checked ~ .controls-2 label:nth-of-type(3),
#slide4-2:checked ~ .controls-2 label:nth-of-type(4),
#slide5-2:checked ~ .controls-2 label:nth-of-type(5) {
    background: #ddd;
}
 
.wrappers-2 label:after {
    border: 2px solid #ddd;
    content: " ";
    display: block;
    height: 12px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 12px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
01.12.2015, 00:22
Ответы с готовыми решениями:

Как сделать отдельное окно в Windows - приложении?
Нужно на событии Button Click сделать так, чтобы чтобы результат вычислений выводился в новом окне...

Отдельное окно с фото - как сделать подпись
Народ! Помогите плиз! Размещаю фотоотчет, на странице пишу &lt;a href='#' ...

Как сделать , чтобы при запуске access форма запускалась как отдельное приложение
Как сделать , чтобы при запуске access форма запускалась как отдельное приложение.Как сделать ,...

Почему не все ядра загружены и, как сделать так, чтобы отдельный поток подавался на отдельное ядро?
Создал 12 потоков, а как-то не все ядра загружены. Процессор i7-3930K. using System; using...

0
01.12.2015, 00:22
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.12.2015, 00:22
Помогаю со студенческими работами здесь

Переключение картинок
Добрый день! Каким образом можно сделать вот такое переключение картинок...

переключение картинок
есть код программы на С#, написан только для переключения двух картинок (по стрелочкам).. мне нужно...

Переключение картинок в хидере
в общем такая ситуация.... есть в хейдере блок div. у него фоновая картинка.. и эту картинку надо...

8 или более картинок в одном блоке
Друзья, подскажите пожалуйста, как можно разместить на одинаковом расстоянии друг от друга и от...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru