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

@Mazara543 · Регистрация: 05.07.2018

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="row padding">
        <div class="offset-lg-1 col-lg-4">
          <h2 id="fat" class="text-center">Лада гранта </h2>
          <p id="info" class="text-center">
            Если в списке нет необходимой вам детали то вы можете заказать её, позвонив по номеру в конце сайта.
          </p>
          <img src="lada granta/Ladagranta.jpg" class="img-thumnail" alt="">
        <br>
        </div>
        <div class="col-lg-6 spisok1" id="gallery">
        <br>
        <img width="30%" src="https://www.avtorinok.ru/photo/VAZ_Lada_Granta_pic_83664.jpg" class="img-thumbnail changePic changePic1" alt="Привет мир">
        <img width="30%" src="lada granta/Ходовая часть/Amortizator.jpg" class="img-thumbnail changePic changePic1" alt="Замена" id="myImage">
        <img width="30%" src="https://www.avtorinok.ru/photo/VAZ_Lada_Granta_pic_83664.jpg" class="img-thumbnail changePic changePic1" alt="Привет fмир">
        <img width="30%" src="https://www.avtorinok.ru/photo/VAZ_Lada_Granta_pic_83664.jpg" class="img-thumbnail changePic changePic1" alt="sadasd">
        <img width="30%" src="https://www.avtorinok.ru/photo/VAZ_Lada_Granta_pic_83664.jpg" class="img-thumbnail changePic changePic1" alt="">
        <img width="30%" src="https://www.avtorinok.ru/photo/VAZ_Lada_Granta_pic_83664.jpg" class="img-thumbnail changePic changePic1" alt="">
        <img width="30%" src="https://www.avtorinok.ru/photo/VAZ_Lada_Granta_pic_83664.jpg" class="img-thumbnail changePic changePic1" alt="">
        <img width="30%" src="https://www.avtorinok.ru/photo/VAZ_Lada_Granta_pic_83664.jpg" class="img-thumbnail changePic changePic1" alt="">
        <img width="30%" src="https://www.avtorinok.ru/photo/VAZ_Lada_Granta_pic_83664.jpg" class="img-thumbnail changePic changePic1" alt="">
        </div>
        <button type="button" name="button" class="next btn btn-secondary btn-lg btn-block">Далее</button>
      </div>

Есть html код с кнопкой "далее"

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let arr = [
    [
        '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 1">',
        '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 2">',
        '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 3">',
    '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 1">',
        '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 2">',
        '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 3">',
    '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 1">',
        '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 2">',
        '<img width="30%" src="https://avatars.mds.yandex.net/get-pdb/216365/447d964b-25ab-4f6b-8c06-a0824c8d1ea5/s1200" class="changePic img-thumbnail" alt="Будущая запчасть 3">',
    ]
];
 
let ind = 0;
 
$('.next').on('click',() => {
    let changePic = $('.spisok1 > .changePic');
    if (ind < changePic.length-1) {
        $('.spisok1').html('<br>');
        $('.spisok1').append(arr[ind].join(' '));
    }
});

Есть jquery код который отвечает за кнопку далее но проблема в том что необходимо, чтобы рядом с этой кнопкой стояла кнопка "назад", либо же кнопка далее отвечала за круговорот то есть возвращала старые картинки.

Может кто нибудь помочь из опытных )?

@Mr_Sergo · 28.09.2019, 14:05

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

круговорот

туда сюда -> https://codepen.io/Mr_Sergo/pen/PoYvGzG

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container-fluid padding">
    <div class="row padding">
        <div class="offset-lg-1 col-lg-4">
            <h2 id="fat" class="text-center">Лада гранта </h2>
            <p id="info" class="text-center">
            Если в списке нет необходимой вам детали то вы можете заказать её, позвонив по номеру в конце сайта.
            </p>
            <img src="#" class="img-thumnail" alt="">
            <br>
        </div>
 
        <button class="prev">Назад</button>
        <button class="next">Далее</button>
        
        <div class="col-lg-6 spisok1"></div>
 
    </div>
</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
let arr = [
    [
        `<img width="30%" src="https://sun9-19.userapi.com/c855628/v855628965/10b18b/DPbGCMsdEhY.jpg" class="changePic">`,
        `<img width="30%" src="https://sun9-19.userapi.com/c855628/v855628965/10b18b/DPbGCMsdEhY.jpg" class="changePic">`,
        `<img width="30%" src="https://sun9-19.userapi.com/c855628/v855628965/10b18b/DPbGCMsdEhY.jpg" class="changePic">`
    ],
    [
        `<img width="30%" src="https://sun9-25.userapi.com/c855628/v855628965/10b199/EFOgJPFz6QY.jpg" class="changePic">`,
        `<img width="30%" src="https://sun9-25.userapi.com/c855628/v855628965/10b199/EFOgJPFz6QY.jpg" class="changePic">`,
        `<img width="30%" src="https://sun9-25.userapi.com/c855628/v855628965/10b199/EFOgJPFz6QY.jpg" class="changePic">`
    ],
    [
        `<img width="30%" src="https://sun9-3.userapi.com/c855628/v855628965/10b192/buiP2dSUi-o.jpg" class="changePic">`,
        `<img width="30%" src="https://sun9-3.userapi.com/c855628/v855628965/10b192/buiP2dSUi-o.jpg" class="changePic">`,
        `<img width="30%" src="https://sun9-3.userapi.com/c855628/v855628965/10b192/buiP2dSUi-o.jpg" class="changePic">`
    ]
];
 
let ind = 0;
$('.spisok1').html(arr[ind].join``);
 
$('.next').on('click',() => {
    if (++ind == arr.length) ind = 0;
    if (ind <= arr.length-1) $('.spisok1').html(arr[ind].join``);
});
 
$('.prev').on('click',() => {
    if (--ind == -1) ind = arr.length-1;
    if (ind >= 0) $('.spisok1').html(arr[ind].join``);
});

CSS
1
2
3
4
.spisok1 {
    position: relative;
    top: 20px;
}

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .