Простой слайдер контента

@MrBrain · Регистрация: 08.06.2010

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

Подскажите пожалуйста как можно сделать слайдер как в приложении? Желательно без использования jQuery.

@kalabuni · 16.06.2013, 17:31

вам с прокруткой надо или чтобы мгновенно перемещались?

@MrBrain · 16.06.2013, 17:37 **[ТС]**

kalabuni, в принципе без разницы, плавно конечно красивее, но не принципиально, мгновенно даже лучше будет.

@kalabuni · 16.06.2013, 21:06

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
<html>
<head>
<style>
body         {text-align: center}
u            {cursor: pointer}
#ext         {width: 600px; display: inline-block; margin: 0 20px}
#ext div.int {width: 150px; height: 120px; display: inline-block;
              text-align: center; line-height: 120px}
</style>
<script>
function myFunc (dir)
{
var obj = document.getElementById ('ext'), dvs = obj.getElementsByTagName ('DIV');
var L = dvs.length, N = parseInt (obj.clientWidth / dvs [0].offsetWidth);
var S = dvs [(dir) ? 0 : L - 1], Z = S.cloneNode (1); obj.removeChild (S);
if (dir) obj.appendChild (Z); else obj.insertBefore (Z, dvs [0]);
for (var j = 0; j < L; j++) dvs [j].style.display = (j < N) ? 'inline-block' : 'none';
}
</script>
</head>
<body>
<u onclick="myFunc (0)">«</u>
<div id="ext"
   ><div class="int" style="background: red"                  >1. каждый</div 
   ><div class="int" style="background: orange"               >2. охотник</div
   ><div class="int" style="background: yellow"               >3. желает</div
   ><div class="int" style="background: green"                >4. знать</div
   ><div class="int" style="background: blue;   display: none">5. где</div
   ><div class="int" style="background: aqua;   display: none">6. сидит</div
   ><div class="int" style="background: violet; display: none">7. фазан</div
></div>
<u onclick="myFunc (1)">»</u>
</body>
</html>

количество внутренних блоков (class="int") может быть любым
ширина внешнего блока (id="ext") должна равняться сумме ширин одновременно видимых блоков
в моём примере ширина внешнего блока 600 пикселей == ширине 4-х видимых блоков шириной по 150 пикселей каждый

@MrBrain · 16.06.2013, 21:33 **[ТС]**

kalabuni, все работает, большое спасибо!

@stef86 · 11.03.2014, 16:51

А как сделать что бы все плавно перемещалось?

@kalabuni · 11.03.2014, 23:58

stef86, сделать "плавно" - не проблема
но надо поначалу узнать ваши условия

например, кликнули по стрелке "ВЛЕВО" - первая видимая картинка/контейнер начинает плавно "уезжать" влево, а справа также плавно появляется невидимая ранее пятая картинка/контейнер

но что делать, если во время плавного "уезжания/появления" юзер ещё раз кликнул на стрелку "ВЛЕВО", причём не один раз, а раз пять-десять?
тем более, интересно узнать, как реагировать, если клиент во время плавного "уезжания" влево кликнет раз десять по кнопке "ВПРАВО"?

дадите ваше видение решения этих вопросов - получите нужный вам код
т.е. я могу как угодно сделать, интересно узнать - как именно вам надо

@stef86 · 12.03.2014, 10:21

Сообщение от kalabuni

кликнули по стрелке "ВЛЕВО" - первая видимая картинка/контейнер начинает плавно "уезжать" влево, а справа также плавно появляется невидимая ранее пятая картинка/контейнер

Ещё было бы не плохо добавить в код констатну которая задавала по сколько слайдов перемещать за раз, например в описаном выше коде эта константа равнялась 1, а если например указать 4 то перемещались все видимые слайды, а на их место приходили другие.
Что делать если во время анимации происходят щелчки вправо/влево: делать ничего не нужно, т.е. если пользователь нажал на кнопку и запустился механизм отображения анимации то кнопки в право/влево не реагируют на щелчки до окончания анимации.

@kalabuni · 17.03.2014, 17:18

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
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<title></title>
<style>
body         {text-align: center}
u            {cursor: pointer}
#ext         {width: 600px; height: 120px; display: inline-block; margin: 0 20px; overflow: hidden; position: relative}
#ext div.int {width: 150px; height: 120px; display: inline-block; text-align: center; line-height: 120px}
</style>
<script>
var cnst = 2;  // количество слайдов, перемещаемых за раз; целое, от 1-го до количества одновременно видимых
var spd  = 50; // скорость; положительное, от 1 до 100, чем больше, тем быстрее (больше 100 тоже можно, но скорость увеличиваться уже не будет)
 
onload = function ()
{
for (var dvs = document.getElementById ('ext').children, j = 0, J = dvs.length; j < J; j++)
   with (dvs [j].style) position = 'absolute', left = 150 * j + 'px';
}
 
function myFunc (dir)
{
var Ext = document.getElementById ('ext'); if (Ext.className) return; if (!Ext.className)
   {
   Ext.className = 'p' + dir; var dvs = Ext.children, J = dvs.length; if (dir > 0)
      {
      for (var j = 0; j < cnst; j++)
         {var Z = dvs [J - 1].cloneNode (1); Ext.removeChild (dvs [J - 1]), Ext.insertBefore (Z, dvs [0])}
      for (var j = 0; j < J; j++) dvs [j].style.left = 150 * (j - cnst) + 'px';
      }
   TMR = setInterval (function ()
      {
      var P = parseInt (Ext.className.substr (1)); for (var j = 0; j < J; j++)
         dvs [j].style.left = (parseInt (dvs [j].style.left) + ((!P) ? -1 : 1)) + 'px';
      if (!parseInt (dvs [P ? 0 : cnst].style.left))
         {
         clearInterval (TMR); Ext.className = ''; if (!P) for (var j = 0; j < cnst; j++)
            {var Z = dvs [0].cloneNode (1); Ext.removeChild (dvs [0]), Ext.appendChild (Z)}
         for (var j = 0; j < J; j++) dvs [j].style.left = 150 * j + 'px';
         }
      }, 1000 / spd);
   }
}
</script>
</head>
<body>
<u onclick="myFunc (0)"> « </u>
<div id="ext">
   <div class="int" style="background: silver">известно, что:</div> 
   <div class="int" style="background: red"   >1. каждый     </div> 
   <div class="int" style="background: orange">2. охотник    </div>
   <div class="int" style="background: yellow">3. желает     </div>
   <div class="int" style="background: green" >4. знать      </div>
   <div class="int" style="background: blue"  >5. где        </div>
   <div class="int" style="background: aqua"  >6. сидит      </div>
   <div class="int" style="background: violet">7. фазан      </div>
</div>
<u onclick="myFunc (1)"> » </u>
</body>
</html>

-- ширина внешнего блока (id="ext") должна равняться сумме ширин одновременно видимых блоков
в моём примере ширина внешнего блока 600 пикселей == ширине 4-х видимых блоков шириной по 150 пикселей каждый

-- количество внутренних блоков (class="int") должно быть не меньшим, чем число одновременно видимых + количество перемещаемых за раз
в моём примере блоков 8, из них одновременно видимых 4, значит, максимальное число перемещаемых за раз можно выставить == 4

@Taatshi · 04.04.2014, 15:12

kalabuni, хорошая штука, но уж очень медленно движется. Никак нельзя увеличить скорость? Как правило требуется почти мгновенное, но видимое в процессе перемещение - к примеру, за секунду-полторы.

@kalabuni · 04.04.2014, 15:53

в строке #35 вместо 1 выставьте любой из делителей ширины внутреннего блока, например, 3

dvs [j].style.left = (parseInt (dvs [j].style.left) + ((!P) ? -3 : 3)) + 'px';

соответственно, скорость увеличится в 3 раза
----------

делители 150 = 1 * 2 * 3 * 5 * 5, т.е. можно прописать любой из них, а также произведение любого количества делителей

@Taatshi · 05.04.2014, 13:44

Эх, жаль.... под ИЕ8 еле дышит и слайды через раз показывает... Можно поправить?

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. 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	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

Простой слайдер контента

Решение

Решение

Решение

@MrBrain 10 / 10 / 0 Регистрация: 08.06.2010 Сообщений: 80

	Простой слайдер контента 16.06.2013, 17:14. Показов 8623. Ответов 11 Метки нет (Все метки) Подскажите пожалуйста как можно сделать слайдер как в приложении? Желательно без использования jQuery. Миниатюры 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	16.06.2013, 17:31
	вам с прокруткой надо или чтобы мгновенно перемещались? 0

@MrBrain 10 / 10 / 0 Регистрация: 08.06.2010 Сообщений: 80
	16.06.2013, 17:37 [ТС]
	kalabuni, в принципе без разницы, плавно конечно красивее, но не принципиально, мгновенно даже лучше будет. 1

@MrBrain 10 / 10 / 0 Регистрация: 08.06.2010 Сообщений: 80
	16.06.2013, 21:33 [ТС]
	kalabuni, все работает, большое спасибо! 1

@stef86 0 / 0 / 0 Регистрация: 11.03.2014 Сообщений: 2
	11.03.2014, 16:51
	А как сделать что бы все плавно перемещалось? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	11.03.2014, 23:58
	stef86, сделать "плавно" - не проблема но надо поначалу узнать ваши условия например, кликнули по стрелке "ВЛЕВО" - первая видимая картинка/контейнер начинает плавно "уезжать" влево, а справа также плавно появляется невидимая ранее пятая картинка/контейнер но что делать, если во время плавного "уезжания/появления" юзер ещё раз кликнул на стрелку "ВЛЕВО", причём не один раз, а раз пять-десять? тем более, интересно узнать, как реагировать, если клиент во время плавного "уезжания" влево кликнет раз десять по кнопке "ВПРАВО"? дадите ваше видение решения этих вопросов - получите нужный вам код т.е. я могу как угодно сделать, интересно узнать - как именно вам надо 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	04.04.2014, 15:12
	kalabuni, хорошая штука, но уж очень медленно движется. Никак нельзя увеличить скорость? Как правило требуется почти мгновенное, но видимое в процессе перемещение - к примеру, за секунду-полторы. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	04.04.2014, 15:53
	Сообщение было отмечено Taatshi как решение Решение в строке #35 вместо 1 выставьте любой из делителей ширины внутреннего блока, например, 3 dvs [j].style.left = (parseInt (dvs [j].style.left) + ((!P) ? -3 : 3)) + 'px'; соответственно, скорость увеличится в 3 раза ---------- делители 150 = 1 * 2 * 3 * 5 * 5, т.е. можно прописать любой из них, а также произведение любого количества делителей 1

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	05.04.2014, 13:44
	Эх, жаль.... под ИЕ8 еле дышит и слайды через раз показывает... Можно поправить? 0