Вращатель большого пальца по расположению папки IMG URL в jQuery - PullRequest
1 голос
/ 05 марта 2020

Как получить местоположение папки из примера IMG URL https://cdn1.example.com/thumbs/23432/0.jpg через jQuery и разрешить установку максимального количества изображений можно найти в примере папки Всего = 5 (Изображения можно найти в папке URL).

Сценарий после создания URL-адресов изображений из примера URL-адреса IMG

https://cdn1.example.com/thumbs/23432/0.jpg
https://cdn1.example.com/thumbs/23432/1.jpg
https://cdn1.example.com/thumbs/23432/2.jpg
https://cdn1.example.com/thumbs/23432/3.jpg
https://cdn1.example.com/thumbs/23432/4.jpg

Когда человек наводит мышкой на «ссылку», вращатель изображения запускается с IMG 0.jpg (первое изображение из списка) и КОНЕЦ с 4.jpg

Когда человек убирает мышь с href, чтобы показать оригинальное изображение с <img src="(original link)" />.

Я пытаюсь некоторые сценарии, но большинству из них нужно добавить ссылки вручную. Я надеялся, что смогу найти сценарий, который будет работать таким образом, и я вижу некоторые проблемы с большинством вращателей большого пальца, когда они начинают вращать некоторые изображения не полностью загружены, я надеялся если есть способ загрузить изображения перед началом, поверните их.

HTML пример:

<a href="/" class="video"><img src="https://cdn1.example.com/thumbs/23432/2.jpg" /></a>

1 Ответ

0 голосов
/ 05 марта 2020

var hoverstatus = false;
var imgArr = ["https://picsum.photos/200/300", "https://picsum.photos/id/237/200/300", "https://picsum.photos/seed/picsum/200/300"];

function imagehover() {
  hoverstatus = true;
  for (var i = 0; i < imgArr.length; i++) {
    var time = 1000 * (i + 1);
    changeImage(i, time);
  }
}

function changeImage(i, time) {
  if (hoverstatus == false) {
    imagehoverout();
    return;
  }
  setTimeout(function() {
    console.log(i);
    jQuery('.video img').attr('src', imgArr[i]);
  }, time);
}

function imagehoverout() {
  hoverstatus = false;
  $('.video img').attr('src', 'https://picsum.photos/200/300.jpg');
}
image
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...