Nano Hash - криптовалюты, майнинг, программирование

Запрос галереи изображений javascript (следующее изображение)

Это мой первый раз на stackoverflow, я очень надеюсь, что кто-то может помочь. Я довольно новичок в кодировании, поэтому надеюсь, что мой запрос прост для решения. Я создал простую галерею изображений javascript, где, если вы нажмете стрелку влево или вправо, она зациклится, чтобы отобразить следующее изображение в моем списке массивов. У меня также есть быстрые ссылки, которые переходят к определенным изображениям в этом списке. Как я могу получить мои следующие / обратные ссылки, чтобы затем продолжить, чтобы показать следующее изображение из выбранного в данный момент? Например, если я перешел к изображению галереи 3, чтобы оно отображало следующее изображение рядом с ним в списке изображения галереи 4, а не изображение галереи 2.

Ниже приведены примеры моего кода.

Большое спасибо заранее за вашу помощь.

Вот мой сценарий:

var num=0;

imgArray = [
  ['../00_assets/gallery/work_00.jpg','Gallery', '1 of 6',],
  ['../00_assets/gallery/work_01.jpg','Gallery', '2 of 6',],
  ['../00_assets/gallery/work_02.jpg','Gallery', '3 of 6'],
  ['../00_assets/gallery/work_03.jpg','Gallery', '4 of 6'],
  ['../00_assets/gallery/work_04.jpg','Gallery', '5 of 6'],
  ['../00_assets/gallery/work_05.jpg','Gallery', '6 of 6'],
]

function slideshow(slide_num) {
  document.getElementById('mypic').src=imgArray[slide_num][0];
  document.getElementById('mypic').alt=imgArray[slide_num][1];
  document.getElementById('number').innerHTML=imgArray[slide_num][2];
}

function slideshowUp() {
  num++;
  num = num % imgArray.length;
  slideshow(num);
}

function slideshowBack() {
  num--;
  if (num < 0) {num=imgArray.length-1;}
  num = num % imgArray.length;
  slideshow(num);
}

Вот мой HTML-код (я удалил фрагменты, которые кажутся неуместными):

  <div align="left">
    <!--  First image in array list is here  -->
    <img src="../00_assets/gallery/work_00.jpg" id="mypic" name="mypic" alt="Gallery">

        <!--  Previous link is here  -->
<a href="#" onclick="slideshowBack(); return false;"> ← </a>

        <!--  First image number is here  -->
  <div id="number">1 of 9</div>

        <!--  Next link is here  -->
<a href="#"  onclick="slideshowUp(); return false;"> → </a>

        <!--  Three quicklinks are link is here  -->
<a href="#" onclick="slideshow(0); return false;">Quicklink 1</a> | 
<a href="#" onclick="slideshow(2); return false;">Quicklink 2</a> | 
<a href="#" onclick="slideshow(4); return false;">Quicklink 3</a> |

Большое спасибо.

javascript image-gallery next onclick slideshow
31.10.2012

Ответы:


1

Вы должны обновлять свою переменную num всякий раз, когда вы меняете текущий слайд.

Затем, когда щелкнут по быстрой ссылке, у нее будет текущий слайд для других методов (slideshowUp и slideshowBack) для работы и сохранения навигации, как и ожидалось.

Другими словами:

function slideshow(slide_num) {
    num = slide_num; // add this line
    document.getElementById('mypic').src=imgArray[slide_num][0];
    document.getElementById('mypic').alt=imgArray[slide_num][1];
    document.getElementById('number').innerHTML=imgArray[slide_num][2];
}
31.10.2012
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..