Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2022, 21:42
Новичок на форуме
Отправить личное сообщение для Neptunin Посмотреть профиль Найти все сообщения от Neptunin
 
Регистрация: 20.01.2022
Сообщений: 5

Множественное слайдшоу на одной странице
Здравсвуйте друзья, имеется код для слайдшоу из указаной папки, у меня стоит задача сделать три таких слайдшоу из разных папок, "утроил код", слайды меняются, но хаотично, хотя при одном слайдшоу - слайды меняются по порядку, подскажите пожалуйста, куда копать.
<script type="text/javascript">
<?php
$images = array();
$folder = 'Rasporyagheniya_1/';
$array_to_js='var imgs=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) { $array_to_js.='"'.$folder.$all_files[$i].'",'; }
echo substr($array_to_js,0,-1).'];';
?>

var n = 0;
var time = 800;
play  =setInterval("chgImg()", 5000);

function chgImg() {
$('#slide_show').fadeOut(time, function() {
  $(this).attr('src', imgs[n]).fadeIn(time);
});

n++;
if (n>=imgs.length) n = 0;
}

<?php
$images = array();
$folder = 'Pisma_2/';
$array_to_js = 'var imgs_2=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) { $array_to_js.='"'.$folder.$all_files[$i].'",'; }
echo substr($array_to_js,0,-1).'];';
?>

var n = 0;
var time = 800;
play = setInterval("chgImg_2()", 5000);

function chgImg_2() {
$('#slide_show_2').fadeOut(time, function() {
  $(this).attr('src', imgs_2[n]).fadeIn(time);
});

n++;
if (n>=imgs_2.length) n = 0;
}

<?php
$images = array();
$folder = 'OTiPB_3/';
$array_to_js = 'var imgs_3=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) { $array_to_js.='"'.$folder.$all_files[$i].'",'; }
echo substr($array_to_js,0,-1).'];';
?>

var n = 0;
var time = 800;
play = setInterval("chgImg_3()", 5000);

function chgImg_3() {
$('#slide_show_3').fadeOut(time, function() {
  $(this).attr('src', imgs_3[n]).fadeIn(time);
});

n++;
if (n>=imgs_3.length) n = 0;
}
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2022, 21:48
Новичок на форуме
Отправить личное сообщение для Neptunin Посмотреть профиль Найти все сообщения от Neptunin
 
Регистрация: 20.01.2022
Сообщений: 5

Результат вот такой, то есть картинки находит по порядку, но выдает странно, может одну и ту же показывать несколько раз подряд
<script type="text/javascript">
var imgs=["Rasporyagheniya_1/1.jpg","Rasporyagheniya_1/2.jpg","Rasporyagheniya_1/3.jpg","Rasporyagheniya_1/4.jpg","Rasporyagheniya_1/5.jpg","Rasporyagheniya_1/6.jpg"];
var n = 0;
var time = 800;
play  =setInterval("chgImg()", 5000);

function chgImg() {
$('#slide_show').fadeOut(time, function() {
  $(this).attr('src', imgs[n]).fadeIn(time);
});

n++;
if (n>=imgs.length) n = 0;
}

var imgs_2=["Pisma_2/1.jpg","Pisma_2/2.jpg","Pisma_2/3.jpg","Pisma_2/4.jpg"];
var n = 0;
var time = 800;
play = setInterval("chgImg_2()", 5000);

function chgImg_2() {
$('#slide_show_2').fadeOut(time, function() {
  $(this).attr('src', imgs_2[n]).fadeIn(time);
});

n++;
if (n>=imgs_2.length) n = 0;
}

var imgs_3=["OTiPB_3/1.jpg","OTiPB_3/2.jpg","OTiPB_3/3.jpg","OTiPB_3/4.jpg","OTiPB_3/5.jpg"];
var n = 0;
var time = 800;
play = setInterval("chgImg_3()", 5000);

function chgImg_3() {
$('#slide_show_3').fadeOut(time, function() {
  $(this).attr('src', imgs_3[n]).fadeIn(time);
});

n++;
if (n>=imgs_3.length) n = 0;
}
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2022, 21:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Neptunin,
https://javascript.ru/forum/misc/835...razheniya.html
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2022, 23:29
Новичок на форуме
Отправить личное сообщение для Neptunin Посмотреть профиль Найти все сообщения от Neptunin
 
Регистрация: 20.01.2022
Сообщений: 5

Со стилями нет проблем, все работает. Не работают слайды по очереди, может один и тот же несколько раз показываться.
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2022, 23:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Neptunin,
переменные по разному назовите, или оберните каждый код как показано ниже.
(код1)();(код2)();(код3)();
Ответить с цитированием
  #6 (permalink)  
Старый 21.01.2022, 17:39
Новичок на форуме
Отправить личное сообщение для Neptunin Посмотреть профиль Найти все сообщения от Neptunin
 
Регистрация: 20.01.2022
Сообщений: 5

Переменные изначально переименовал, оборачивание к сожалению не помогло. Скрипт перестает работать.
Ответить с цитированием
  #7 (permalink)  
Старый 21.01.2022, 18:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Neptunin,
так возьмите код предложенный выше #3
Ответить с цитированием
  #8 (permalink)  
Старый 22.01.2022, 00:12
Новичок на форуме
Отправить личное сообщение для Neptunin Посмотреть профиль Найти все сообщения от Neptunin
 
Регистрация: 20.01.2022
Сообщений: 5

Спасибо. Если одно слайдшоу - работает прекрасно, сделал три и все перестает работать. Если одинаковое время смены - не работает, если разное, меняет слайды, но опять как захочет, то есть такая же проблема, как и с предыдущим скриптом.
var coin = 1;
var changeBg = function() {
  $('.lf').css('background', 'url(Rasporyagheniya_1/' + coin++ + '.jpg)');
  if (coin > 3)
    coin = 1;
}
setInterval(changeBg, 3000);

var coin = 1;
var changeBg = function() {
  $('.cn').css('background', 'url(Pisma_2/' + coin++ + '.jpg)');
  if (coin > 3)
    coin = 1;
}
setInterval(changeBg, 3000);

var coin = 1;
var changeBg = function() {
  $('.rf').css('background', 'url(OTiPB_3/' + coin++ + '.jpg)');
  if (coin > 3)
    coin = 1;
}
setInterval(changeBg, 3000);
Ответить с цитированием
  #9 (permalink)  
Старый 22.01.2022, 00:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Neptunin,
а сделать 1 функцию для всех слайдеров или разные переменные объявить или обернуть код каждого слайдера?
выкинуть строки с 8 по 23, строки 11 и 19 поставить после строки 3.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Несколько скриптов на одной странице yoo Общие вопросы Javascript 14 17.07.2015 22:08
Ajax+js+5 форм обратной связи на одной странице aleksandr8i AJAX и COMET 0 01.04.2014 10:04
100-200 уникальных таймеров на одной странице. Aeliot Элементы интерфейса 36 30.06.2013 18:59
Как сделать 2 галереи JQuery на одной странице? orendzi jQuery 8 16.07.2011 15:22
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 01:46