Создать ответ 
Несколько слайд-шоу с плавной сменой изображений на jQuery
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #1
Несколько слайд-шоу с плавной сменой изображений на jQuery
Приводим небольшую модификацию скрипта плавной смены изображений на jQuery, которая позволит Вам реализовать на своем сайте несколько слайд-шоу со сменой изображений, которые будут меняться с различными интервалами времени.

Из данного скрипта для уменьшения кода мы убрали все лишнее (кнопки принудительной смены изображений и остановки слайд-шоу).

В результате получилось следующее:

Код:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="text/javascript">
all_images = new Array ("image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png");
all_images_2 = new Array ("image/img_11.png","image/img_12.png","image/img_13.png");
all_images_3 = new Array ("image/img_111.png","image/img_112.png");
var ImgNum = new Array (0,0,0);
time = 800;

function chgImg(whois,mass,num) {
ImgNum[num]++;
if (ImgNum[num] > mass.length - 1) { ImgNum[num] = 0; }
$('#'+whois).fadeOut(time, function() {$(this).attr('src', mass[ImgNum[num]]).fadeIn(time);});
}
</script>

<div align="center">
<img src="image/img_1.png" id="slide_show">
<img src="image/img_11.png" id="slide_show_2">
<img src="image/img_111.png" id="slide_show_3">
</div>

<script type="text/javascript">
run = setInterval("chgImg('slide_show',all_images,0)", 2500);
run_2 = setInterval("chgImg('slide_show_2',all_images_2,1)", 3000);
run_3 = setInterval("chgImg('slide_show_3',all_images_3,2)", 3500);
</script>

Обратите внимание на массив var ImgNum = new Array (0,0,0);
Как видно, он содержит три ноля. Это начальные значения, массивов изображений, с которых будет начинаться слайд-шоу.
Если Вы планируете больше трех слайд-шоу на страничке, то добавьте необходимое количество нолей (или других цифр) в данный массив.
14.09.2013 20:28:31
Найти все сообщения Цитировать это сообщение
ApenDover Не на форуме
Рядовой
*

Сообщений: 5
У нас с: May 2014
Сообщение: #2
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
После одного прохода сбивается интервал. Как обнулить интервал и задать вновь, как только изменилась картинка в третьем блоке?
03.05.2014 18:47:36
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #3
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
Только что проверил, работает отлично и ничего не сбивается.

Могу предположить, что в переменной time у Вас указано значение больше половины одного из таймеров. Следовательно, пока изображение исчезает и вновь появляется (за интервал time*2) таймер не успевает сработать.

Для проверки правильности работы скрипта задайте значение переменной time=300;, а интервалы таймеров 1000, 2000 и 4000 соответственно. Тогда наглядно можно понаблюдать, что второе изображение будет ровно в два раза реже сменяться, чем первое, а третье изображение - в два раза реже второго и в четыре раза реже первого.

Потом задайте значение переменной time = 1100; и вот тогда начнется рассинхрон.

Думаю понятно объяснил. Wink
03.05.2014 19:12:22
Найти все сообщения Цитировать это сообщение
ApenDover Не на форуме
Рядовой
*

Сообщений: 5
У нас с: May 2014
Сообщение: #4
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
(03.05.2014 19:12:22)Admin писал(а):  Только что проверил, работает отлично и ничего не сбивается.

Могу предположить, что в переменной time у Вас указано значение больше половины одного из таймеров. Следовательно, пока изображение исчезает и вновь появляется (за интервал time*2) таймер не успевает сработать.

Для проверки правильности работы скрипта задайте значение переменной time=300;, а интервалы таймеров 1000, 2000 и 4000 соответственно. Тогда наглядно можно понаблюдать, что второе изображение будет ровно в два раза реже сменяться, чем первое, а третье изображение - в два раза реже второго и в четыре раза реже первого.

Потом задайте значение переменной time = 1100; и вот тогда начнется рассинхрон.

Думаю понятно объяснил. Wink

Все верно, спасибо за скорый ответ.
Но моя цель - получить смену картинок с интервалами в 3500, 3600 и 3700. А дабы не было рассинхрона, как-то после первого прохода использовать ClearInterval и вновь его указать. Вот и мучаюсь.
03.05.2014 19:34:20
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #5
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
Кратные 1000 мс интервалы я посоветовал для проверки, а так главное, чтобы переменная time, отвечающая за время исчезновения и время появления изображения была как минимум в два раза меньше чем минимальный интервал таймера. Тогда рассинхрона не будет!
03.05.2014 19:40:30
Найти все сообщения Цитировать это сообщение
ApenDover Не на форуме
Рядовой
*

Сообщений: 5
У нас с: May 2014
Сообщение: #6
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
(03.05.2014 19:40:30)Admin писал(а):  Кратные 1000 мс интервалы я посоветовал для проверки, а так главное, чтобы переменная time, отвечающая за время исчезновения и время появления изображения была как минимум в два раза меньше чем минимальный интервал таймера. Тогда рассинхрона не будет!

Поставьте 3500, 3600, 3700 интервалы, а переменную time = 300 (300 же более чем в два раза меньше чем 3500).
Подождите две минутки и на глаз станет заметно как картинки переключаются не в 100мс, а куда как с большим отрывом.
03.05.2014 19:47:25
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #7
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
Все верно, т.к. с каждым показом разница между сменой первой и второй картинки будет увеличиваться на 0,1 секунды.

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

Подумаю, как такое можно сделать.
03.05.2014 19:55:42
Найти все сообщения Цитировать это сообщение
ApenDover Не на форуме
Рядовой
*

Сообщений: 5
У нас с: May 2014
Сообщение: #8
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
Вот спасибо! Smile
Буду ждать.
03.05.2014 20:15:58
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #9
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
Постарался сделать с минимальными изменениями. Изменения коснулись функции chgImg и ее вызова:
Код:
function chgImg(whois,mass,num,delay) {
ImgNum[num]++;
if (ImgNum[num] > mass.length - 1) { ImgNum[num] = 0; }
$('#'+whois).delay(delay).fadeOut(time, function() {$(this).attr('src', mass[ImgNum[num]]).fadeIn(time);});
}
</script>

<script type="text/javascript">
run = setInterval("chgImg('slide_show',all_images,0,0)", 3500);
run_2 = setInterval("chgImg('slide_show_2',all_images_2,1,200)", 3500);
run_3 = setInterval("chgImg('slide_show_3',all_images_3,2,400)", 3500);
</script>

Просто добавил в функцию chgImg() еще одну переменную, которая отвечает за задержку перед началом смены изображений.
03.05.2014 21:57:56
Найти все сообщения Цитировать это сообщение
ApenDover Не на форуме
Рядовой
*

Сообщений: 5
У нас с: May 2014
Сообщение: #10
RE: Несколько слайд-шоу с плавной сменой изображений на jQuery
Ага, как ускорять - разобрался. Спасибо! Smile
03.05.2014 22:22:17
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru