Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.69/13: Рейтинг темы: голосов - 13, средняя оценка - 4.69
0 / 0 / 1
Регистрация: 15.06.2014
Сообщений: 11

как сделать несколько разных слайд-шоу на странице?

17.06.2014, 15:53. Показов 2598. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте!
Я создал создал страницу, поставил на неё слайд шоу с изображениями из одной папки и хочу поставить теперь рядом другое слайд-шоу с изображениями из второй папки.
Помогите пожалуйста! Я в JavaScript не силён. Если можете и не составит затруднений объясните подробней где и что нужно прописать.

мой сайт тут
Слайд-шоу.rar
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
17.06.2014, 15:53
Ответы с готовыми решениями:

Слайд шоу, переместить кнопки радио на центр в слайд шоу
Здравствуйте как переместить кнопки радио с левой стороны на цент или в право? смотрите скнин шот. Спасибо <div...

Как сделать несколько одинаковых слайд шоу на странице
Здравствуйте. Воспользовался этим примером слайд шоу. http://jquery.malsup.com/cycle/basic.html Но если сделать несколько блоков <div...

Как сделать слайд-шоу
В общем, примерно так. В базе данных содержиться информация о товаре, включая путь к изображению товара. Все это выводиться в php. ...

2
 Аватар для massEffect
80 / 80 / 53
Регистрация: 22.03.2013
Сообщений: 271
19.06.2014, 12:35
Лучший ответ Сообщение было отмечено TarasovT как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
<div >
        <table border="0">
            <tr align="center">
                <td colspan="3"><a href="catalog1/1.html" title="Каталог №1"><img width=250, height=125 src="catalog1/1.jpg" id="slide_show_1"></a></td>
                <td colspan="3"><a href="catalog2/1.html" title="Каталог №1"><img width=250, height=125 src="catalog2/1.jpg" id="slide_show_2"></a></td>
            </tr>
        </table>
        
        </div>
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
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
<script type="text/javascript">
        
    function RollBack(id, imgs, delay)
    {
        this.arrImg = [];
        
        for(var i = 0; i < imgs.length; i++)
        {
            this.arrImg[i] = new Image();
            this.arrImg[i].src = imgs[i];
        };
        
        this.id = document.getElementById(id);
        
        this.delay = delay;     
        this.timer = null;
                    
        this.numImg = 0;
        
    };
    
    
    RollBack.prototype.run = function(step)
    {
        var self = this;
        
        if(self.timer)return;
        this.step = step;       
        
        self.timer = setInterval(function(){ RollBack.slideShow(self); }, self.delay);
    };
    
    
    RollBack.prototype.stop = function()
    {
        clearInterval(this.timer);  
        this.timer = null;  
    };
    
    
    RollBack.slideShow = function(obj)
    {
        var len = obj.arrImg.length - 1;
    
        obj.numImg += obj.step;
        
        if(obj.numImg < 0)obj.numImg = len;
        if(obj.numImg > len)obj.numImg = 0;
                
        obj.id.src = obj.arrImg[obj.numImg].src;
    
    };
    
    //id ваших картинок    
    var id_1 = "slide_show_1";
    var id_2 = "slide_show_2";
    
    //создаем объекты со слайдшоу (id, массив пути к рисункам, задержка в мсек)
    var pic_1 = new RollBack(id_1, ["catalog1/1.jpg" , "catalog1/2.jpg", "catalog1/3.jpg"], 3000);
    var pic_2 = new RollBack(id_2,  ["catalog2/1.jpg" , "catalog2/2.jpg", "catalog2/3.jpg"], 5500);
    
    
        
    window.onload = function()
    {
        //указываем шаг изменения картинок, в данном случае 1
        pic_1.run(1);
        pic_2.run(1);       
    };
    
    
</script>
1
0 / 0 / 1
Регистрация: 15.06.2014
Сообщений: 11
19.06.2014, 12:50  [ТС]
Спасибо вам!
А что бы добавить 3-й, 4-й и т.д. слайд-шоу, мне нужно будет в HTML добавить ещё ряд
HTML5
1
<td colspan="3"><a href="catalog3/1.html" title="Каталог №3"><img width=250, height=125 src="catalog3/1.jpg" id="slide_show_2"></a></td>
и сменить путь к изображениям?
а так же в Код JavaScript
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
   //id ваших картинок 
    var id_1 = "slide_show_1";
    var id_2 = "slide_show_2";
    
    //создаем объекты со слайдшоу (id, массив пути к рисункам, задержка в мсек)
    var pic_1 = new RollBack(id_1, ["catalog1/1.jpg" , "catalog1/2.jpg", "catalog1/3.jpg"], 3000);
    var pic_2 = new RollBack(id_2,  ["catalog2/1.jpg" , "catalog2/2.jpg", "catalog2/3.jpg"], 5500);
    
    
        
    window.onload = function()
    {
        //указываем шаг изменения картинок, в данном случае 1
        pic_1.run(1);
        pic_2.run(1);       
    };
добавить дополнительные строки с цифрами 3, 4 и т.д.?

Я правильно понимаю? или что-то упускаю?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
19.06.2014, 12:50
Помогаю со студенческими работами здесь

Как сделать всплывающее и затухающее слайд-шоу на флэш?
Доброго времени суток! Есть исходник другого слайдера, но там эффект другой, как сделать так чтобы изображения при нажатии на стрелку...

Как сделать одновременный просмотр слайд-шоу и прослушивание музыки?
Всем привет. Не могли бы вы помочь мне) Я пишу программу по типу мультика, а точнее слайд-шоу с быстрым перелистыванием кадров. У меня...

Как сделать слайд-шоу, где картинки меняются самостоятельно
Как можно сделать чтобы картинки менялись сами каждые 5 секунд https://www.cyberforum.ru/cpp-builder/thread157629.html ?

Как сделать открытие слайд-шоу в модальном окне при клике на ссылке?
На данный момент по ссылке открывается отдельная страница с несколькими картинками. Хочу сделать просмотр этих картинок на этой же...

Сделать слайд-шоу
Нужно сделать слайд-шоу на делфи который переключается кнопками тип нажал в право она перелиснула на след и так далее потом в лево она на...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK сделайте это, JDK, то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера . . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru