Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Заменить рандом на порядковое последовательное событие (https://javascript.ru/forum/css-html/83661-zamenit-random-na-poryadkovoe-posledovatelnoe-sobytie.html)

Radar89 08.02.2022 05:09
Заменить рандом на порядковое последовательное событие
 
Доброго времени суток

к сожаление не нашел то что хотел,

Мне нужно последовательное-порядковое изменение картинок после обновления страницы вместо рандомного
то есть вместо случайного выбора картинок, порядковый.
Вот этот скрипт 

<script type="text/javascript">
var myLogos = new Array

('http://dugward.ru/foto/Kosha1.jpg', 'http://dugward.ru/foto/Kosha2.jpg', 'http://dugward.ru/foto/Kosha3.jpg');

//Адресов Логотипов может быть сколько угодно. Главное, не забывайте о кавычках, запятых и прочих значках. И разумеется, для логотипа лучше брать изображения одного размера.

var Idx = Math.floor(Math.random() * myLogos.length);
document.write('<img src="'+myLogos[Idx]+'">');
</script>

ksa 08.02.2022 08:43
Radar89, при загрузке читай индекс элемента (если пусто - 0) и выводи.
Потом увеличивай +1 и записывай обратно...

рони 08.02.2022 09:53
Radar89,
var myLogos = new Array
        ('https://dugward.ru/foto/Kosha1.jpg', 'https://dugward.ru/foto/Kosha2.jpg', 'https://dugward.ru/foto/Kosha3.jpg');
        var Idx = (+localStorage.index || myLogos.length) % myLogos.length;
        localStorage.index = ++Idx;
        document.write('<img src="' + myLogos[Idx] + '">');

Radar89 08.02.2022 11:36
Спасибо, ksa, Спасибо профессор рони, сейчас протестирую.

Radar89 08.02.2022 12:51
Спасибо еще раз
хотел добавить в код поочередно индекс элемента 

image[0]="http://dugward.ru/foto/Kosha1.jpg"
image[1]="http://dugward.ru/foto/Kosha2.jpg"
image[2]="http://dugward.ru/foto/Kosha3.jpg"

  и в конце кода 
document.write (" <img src="+image[1]+image[2]"> ");


Немного не разобрался код пока не хочет работать с добавленными индексами, то есть мне здесь в фотографиях значение надо изменить
и вставить с индексами что бы работало правильно 
var myLogos = new Array

 поменять вот это на индексы       ('http://dugward.ru/foto/Kosha1.jpg', 'http://dugward.ru/foto/Kosha2.jpg', 'http://dugward.ru/foto/Kosha3.jpg'

ksa 08.02.2022 13:56 
<html>
<script>
const image = [
   "http://dugward.ru/foto/Kosha1.jpg",
   "http://dugward.ru/foto/Kosha2.jpg",
   "http://dugward.ru/foto/Kosha3.jpg"
]
document.write ("<img src="+image[1]+"> ");
document.write ("<img src="+image[2]+"> ");
</script>
</html>

Radar89 08.02.2022 14:00
Цитата:
Сообщение от ksa (Сообщение 543583) 
<html>
<script>
const image = [
   "https://dugward.ru/foto/Kosha1.jpg",
   "https://dugward.ru/foto/Kosha2.jpg",
   "https://dugward.ru/foto/Kosha3.jpg"
]
document.write ("<img src="+image[1]+"> ");
document.write ("<img src="+image[2]+"> ");
</script>
</html>
Спасибо сейчас протестирую

ksa 08.02.2022 14:01
Radar89, только протокол правильно укажи.
Тут работать будет только с https... :(

Radar89 08.02.2022 14:31
Ах у меня http ,... Ох,... Сайт с http начинается

а картинки с кошками это не с моего сайта , Это сайт какого то мужика и тетеньки, я решил изменить их рандомный код на последовательную смену картинок в порядке 1 , 2, 3 и так далеее
Что бы потом вставить себе на сайт

Radar89 08.02.2022 14:32
Да, я заметил стоит все в статике, динамики после обновления страницы нет.

Radar89 08.02.2022 14:37
Мне просто потребовался не замысловатый код,
что бы например картинка в шапке или подвале сайта
после клика по ссылке и переходе на любую другую страницу сайта после обновления менялась на новую картинку , но не рандомно как у них. А по порядку следующая, одна за другой в последовательности.

Radar89 08.02.2022 14:39
Вот их сайт http://lezione.dugward.ru/u25.html

ksa 08.02.2022 15:17
Для "следования по порядку" нужно запоминать "с какого места продолжать" и сбрасывать, если выходишь за размерность массива.
Про это тебе написали в самом начале.
И пример даже есть. ;)

Radar89 08.02.2022 15:35
Огромное спасибо еще раз )
Пусть по умолчанию еще до кликов по ссылкам,
будет видна картинка https://dugward.ru/foto/Kosha1.jpg это картинка будет видно когда гость сайта первый раз попадает на сайт еще до любых действий на сайте
и далее два перехода
После каждого перехода по сайту и обновлению страницы ,
картинка меняется после первого клика на https://dugward.ru/foto/Kosha2.jpg

и после второго клика на https://dugward.ru/foto/Kosha3.jpg


Интересно мне оба варианта будут интересны как цикл 1 , 2 , 3 и далее повторяется вновь

и вариант с концовкой как вы сказали если выходишь за размерность
1, 2, 3 и далее как сказать 3-картинка например уже "конечная станция" и там уже ничего не меняется то есть после третьей картинки уже ничего не происходит , то есть все действия сбрасывается и ничего далее не происходит.

если только после закрытия браузера и вновь открытия браузера заходим на сайт с этим кодом где все повторяется вновь но до третьей картинки

хотя второй вариант более странный ) но он мне тоже интересен.
а первый вариант понятный своей цикличностью один два три и снова повторяется по кругу.
Если не сложно покажите два варианта последовательной смены картинок цикличной и конечной.

ksa 08.02.2022 16:21
Цитата:
Сообщение от Radar89
Если не сложно покажите два варианта последовательной смены картинок цикличной и конечной.
При "цикличности" нужно после +1 сверить с длиной массива картинок.
Если индекс выходит за пределы - сбрасывать его в 0...

Если цикличность не нужна - просто не делать +1, если это конец массива.
Тогда далее будет показываться только последняя картинка.

рони 08.02.2022 16:32
Цитата:
Сообщение от Radar89
Если не сложно покажите два варианта последовательной смены картинок цикличной и конечной.
чем не устроил самый первый предложенный вариант? пост #3

Radar89 08.02.2022 16:49
Цитата:
Сообщение от рони (Сообщение 543599)
чем не устроил самый первый предложенный вариант? пост #3
Сейчас один момент еще раз прокручу его у себе на странице.

рони 08.02.2022 16:58
Цитата:
Сообщение от Radar89
Сейчас один момент еще раз прокручу его у себе на странице.
тестируйте этот вариант.
кнопку посмотреть нажать 4 раза или больше.
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">

</head>
<body>
   <script>
        var myLogos = new Array
        ('https://place-hold.it/300x500?text=1', 'https://place-hold.it/300x500?text=2', 'https://place-hold.it/300x500?text=3');
        var Idx = (+localStorage.index || myLogos.length) % myLogos.length;
        document.write('<img src="' + myLogos[Idx] + '">');
        localStorage.index = ++Idx;
    </script>
</body>
</html>

Radar89 08.02.2022 17:10
Да вроде все хорошо работает спасибо еше раз

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

Radar89 08.02.2022 17:11
Цитата:
Сообщение от рони (Сообщение 543601)
тестируйте этот вариант.
кнопку посмотреть нажать 4 раза или больше.
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">

</head>
<body>
   <script>
        var myLogos = new Array
        ('https://place-hold.it/300x500?text=1', 'https://place-hold.it/300x500?text=2', 'https://place-hold.it/300x500?text=3');
        var Idx = (+localStorage.index || myLogos.length) % myLogos.length;
        document.write('<img src="' + myLogos[Idx] + '">');
        localStorage.index = ++Idx;
    </script>
</body>
</html>
Спасибо, Огромное Спасибо сейчас посмотрю

Radar89 08.02.2022 17:24
Спасибо профессор Рони, все Изумительно и четко работает, как швейцарские часики, последний Вариант Самый Лучший!!!

Борис К 10.02.2022 16:53
Radar89, возможно, и этот пример (рандомный) пригодится Вам:
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script>
 function makeLogo() {
 let logo = ["<img src='https://placehold.co/500x150/ff0000/ffff00?font=playfair-display&text=One'>", "<img src='https://placehold.co/500x150/ff0000/ffff00?font=playfair-display&text=Two'>", "<img src='https://placehold.co/500x150/ff0000/ffff00?font=playfair-display&text=Three'>", "<img src='https://placehold.co/500x150/ff0000/ffff00?font=playfair-display&text=Four'>", "<img src='https://placehold.co/500x150/ff0000/ffff00?font=playfair-display&text=Five'>"];
 let random = Math.floor(Math.random() * logo.length);
 let logos = logo[random];
 let logosElement = document.getElementById("logos").innerHTML = logos;
}
window.onload = makeLogo;
</script>
</head>
<body>
<div id="logos"></div>
</body>
</html>


Часовой пояс GMT +3, время: 02:38.