Каждый элемент dropdownlist показывает разное слайдшоу

@zzzzz5 · Регистрация: 15.07.2014

Студворк — интернет-сервис помощи студентам

Как создать dropdownlist, где каждый вариант из списка, показывает слайдшоу картинок. Массив картинок для каждого варианта отличается.
Я новенький в Javascript, прошу написать ответ доступно

Спасибо

@Thisman · 15.07.2014, 17:07

zzzzz5, тут половина будет от css зависить.
Во первых делаешь контейнер, размеры которого равны размерам одного слайда, ставишь ему overflow:hidden,
Далее запихиваешь туда список. Каждый элемент списка = это еще один список, который уже является слайдером. Слайдер можно подключить. После по нажатию на кнопку специальную, допустим, делаешь высоту самого верхнего контейнера делаешь максимальной. Я напишу общий код, но детали нужно будет самому сделать:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper">
    <ul class="drowDownSlider">
        <li class="slider">
             <ul> <!-- а это уже сладер картинок -->
                  <li></li>
                  <li></li>
                  <li></li>
             <ul>
        </li>  <!-- каждый элемент сам по себе горизонтальный слайдер-->
        <li class="slider"></li>
        <li class="slider"></li> 
        <li class="slider"></li> 
    </ul>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrapper {
    width:250px;
    height:250px;
    overflow:hidden;
}
.wrapper ul {
    margin:0px;
    padding:0px /* убираем дурацкие отступы*/
}
.slider {
    width:100%;
    height:100%;
}
.wrapper:hover {
    height:750px;
}

Вот что-то в этом роде, для начала

@zzzzz5 · 16.07.2014, 09:06 **[ТС]**

Спасибо, за ответ. Но я решил попробовать использовать jquery cycle plugin вот таким способом

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
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
<title>Slider</title>
<style>
 
.wrapper {
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    border: 2px solid #f00;
    width: 200px;
    height: 125px;
}
.wrapper ul {
    margin:0px;
    padding:0px 
}
.slider {
    width:100%;
    height:100%;
}
 
.imageClass {
    width: 100%;
    height: 100%;
}
</style>
<script>
var elem = document.getElementById('drowDownSlider');
var list = elem.getElementsByClassName('slider');   //массив из списков
var e = document.getElementById("animal");
var val = e.options[e.selectedIndex].value;          //индекс выбранного варианта из dropdownlist
$('list[val]').cycle({                //Как можно использовать метод cycle с элементом массива??
fx: 'fade', 
speed: 'slow', 
timeout: 1000 
});
</script>
</head>
<body>
<div class="menu">
<label for="animal">Animal</label>
                        <select id="animal">
                            <option>Choose animal </option>
                            <option value="1">animal 1 </option>
                            <option value="2">animal 2</option>
                            <option value="3">animal 3 </option>
                            </select>
</div>
<div class="wrapper">
    <ul id="drowDownSlider">
        <li class="slider">
             <ul> 
                  <li><img class="imageClass" src="https://www.cyberforum.ru/images/img1.jpg"/></li>
                  <li><img class="imageClass" src="https://www.cyberforum.ru/images/img2.jpg"/></li>       
             <ul>
        </li>  
        <li class="slider">
        <ul> 
                  <li><img class="imageClass" src="https://www.cyberforum.ru/images/img3.jpg"/></li>
                  <li><img class="imageClass" src="https://www.cyberforum.ru/images/img4.jpg"/></li>       
             <ul>
        </li>
        <li class="slider">
        <ul> 
                  <li><img class="imageClass" src="https://www.cyberforum.ru/images/img5.jpg"/></li>
                  <li><img class="imageClass" src="https://www.cyberforum.ru/images/img6.jpg"/></li>       
             <ul>
        </li> 
        
    </ul>
</div>
</body>
</html>

Код не работает, я думаю ошибка в логике((

@Thisman · 16.07.2014, 10:45

zzzzz5, тут есть теги для вставки кода, лучше через них вставлять, дабы смотрелось читабельно

@zzzzz5 · 16.07.2014, 10:50 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
var elem = document.getElementById('drowDownSlider');
var list = elem.getElementsByClassName('slider');   //создаю массив из списков
var e = document.getElementById("animal");   //индекс выбранного варианта из dropdownlist
var val = e.options[e.selectedIndex].value;
$('list[val]').cycle({   //Как можно использовать метод cycle с элементом массива??
fx: 'fade', 
speed: 'slow', 
timeout: 1000 
});

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
<body>
<div class="menu">
<label for="animal">Animal</label>
                        <select id="animal">
                            <option>Choose animal </option>
                            <option value="1">animal 1 </option>
                            <option value="2">animal 2</option>
                            <option value="3">animal 3 </option>
                            </select>
</div>
<div class="wrapper">
    <ul id="drowDownSlider">
        <li class="slider">
             <ul> 
                  <li><img class="imageClass" src="images/img1.jpg"/></li>
                  <li><img class="imageClass" src="images/img2.jpg"/></li>       
             <ul>
        </li>  
        <li class="slider">
        <ul> 
                  <li><img class="imageClass" src="images/img3.jpg"/></li>
                  <li><img class="imageClass" src="images/img4.jpg"/></li>       
             <ul>
        </li>
        <li class="slider">
        <ul> 
                  <li><img class="imageClass" src="images/img5.jpg"/></li>
                  <li><img class="imageClass" src="images/img6.jpg"/></li>       
             <ul>
        </li> 
        
    </ul>
</div>
</body>

@Thisman · 16.07.2014, 10:56

zzzzz5, документация же есть у слайдера,который ты используешь? Посмотри в ней, возможно там есть ответ. Если нужен объект, то есть функция ( или написать самому) которыя массив превращают в объект

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@zzzzz5 0 / 0 / 0 Регистрация: 15.07.2014 Сообщений: 3

	Каждый элемент dropdownlist показывает разное слайдшоу 15.07.2014, 14:40. Показов 611. Ответов 5 Метки нет (Все метки) Как создать dropdownlist, где каждый вариант из списка, показывает слайдшоу картинок. Массив картинок для каждого варианта отличается. Я новенький в Javascript, прошу написать ответ доступно Спасибо 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	16.07.2014, 10:45
	zzzzz5, тут есть теги для вставки кода, лучше через них вставлять, дабы смотрелось читабельно 0

@Thisman Модератор 771 / 352 / 142 Регистрация: 17.07.2013 Сообщений: 992
	16.07.2014, 10:56
	zzzzz5, документация же есть у слайдера,который ты используешь? Посмотри в ней, возможно там есть ответ. Если нужен объект, то есть функция ( или написать самому) которыя массив превращают в объект 0