Слайдшоу

@Stud_pro · Регистрация: 29.01.2013

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

Здравствуйте, подскажите как можно сделать подобное слайдшоу http://thewaltdisneycompany.com/ чтобы через 10-15 секунд, листалось по три картинки безконечно...!? Спасибо!

@заряжайка · 19.03.2014, 15:03

оформить с помощью html и css как вам надо надеюсь сами сможете
если картинки у вас с расширением отличным от *.jpg, смените на нужное

JavaScript
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div {
        height: 300px;
        width: 400px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
 
    <div><img src="1.jpg" alt="" id="images"></div>
    
    <script>
      var x = document.getElementById("images");
      var i = 1;
      setInterval(function() {
        x.src = i + ".jpg";
        i = (i < 3) ? ++i : 1;
      }, 10000);
    </script>
  </body>
</html>

Добавлено через 9 минут
имена картинкам дайте: 1, 2, 3

@kalabuni · 19.03.2014, 17:48

по вашей ссылке не только "листалось по три картинки безсконечно"

там при наведении мыши на слайды или на кнопки/стрелки авто-листание прекращается
при нажатии на кнопки/стрелки слайдер пролистывается в нужном направлении
а при отведении мыши авто-листание возобновляется

аналог диснеевского слайдера с авто-перелистыванием будет чуть посложнее того, что я недавно делал в теме Простой слайдер контента

Кликните здесь для просмотра всего текста

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
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<title></title>
<style>
body         {text-align: center; margin-top: 234px}
#lD, #rD     {cursor: pointer}
#ext         {width: 750px; height: 120px; display: inline-block; margin: 0 20px; overflow: hidden; position: relative}
#ext div.int {width: 150px; height: 120px; display: inline-block; cursor: pointer; text-align: center; line-height: 120px}
</style>
<script>
var cnst =  3; // êîëè÷åñòâî ñëàéäîâ, ïåðåìåùàåìûõ çà ðàç; öåëîå, îò 1-ãî äî êîëè÷åñòâà îäíîâðåìåííî âèäèìûõ
var spd  = 50; // ñêîðîñòü; ïîëîæèòåëüíîå, îò 1 äî 100, ÷åì áîëüøå, òåì áûñòðåå (áîëüøå 100 òîæå ìîæíî, íî ñêîðîñòü óâåëè÷èâàòüñÿ óæå íå áóäåò)
var pxls = 10; // ïèêñåëüíûé èíòåðâàë; ëþáîå ÷èñëî, íà êîòîðîå øèðèíà îäíîãî ñëàéäà äåëèòñÿ áåç îñòàòêà: 1, 2, 3, 5, 6, 10, 15...; ÷åì áîëüøå, òåì áûñòðåå
 
function addEv (obj)
{
obj.addEventListener ('mouseover', function () {clearInterval (TMR0)});
obj.addEventListener ('mouseout' , function () {TMR0 = setInterval ('myFunc (0)', 5000)});
}
 
onload = function ()
{
var lst = [document.getElementById ('lD'), document.getElementById ('rD')];
for (var dvs = document.getElementById ('ext').children, j = 0, J = dvs.length; j < J + 2; j++)
   {
   if (j < J) with (dvs [j].style) position = 'absolute', left = 150 * j + 'px';
   addEv ((j < J) ? dvs [j] : lst [j - J])
   }
TMR0 = setInterval ('myFunc (0)', 4000);
}
 
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]); addEv (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) * pxls) + '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]); addEv (Ext.appendChild (Z))}
         for (var j = 0; j < J; j++) dvs [j].style.left = 150 * j + 'px';
         }
      }, 1000 / spd);
   }
}
</script>
</head>
<body>
<u id="lD" 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 id="rD" onclick="myFunc (1)"> » </u>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений 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

@Stud_pro 3 / 1 / 0 Регистрация: 29.01.2013 Сообщений: 384

	Слайдшоу 19.03.2014, 09:03. Показов 1412. Ответов 2 Метки нет (Все метки) Здравствуйте, подскажите как можно сделать подобное слайдшоу http://thewaltdisneycompany.com/ чтобы через 10-15 секунд, листалось по три картинки безконечно...!? Спасибо! 0

Слайдшоу

Решение