Слайдшоу

@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>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

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

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

Слайдшоу

Решение