Новости Скрипты Онлайн сервисы Хитрости Гостевая книга Статистика сайта Реклама на сайте
UsefulScript.ruСкриптыГрафикаРотатор изображений
13
61

Автоматическая смена изображений
и подписей к ним

Для того чтобы показать посетителям своего сайта последовательно несколько различных изображений мы предлагаем Вам воспользоваться JavaScript кодом автоматической смены изображений.


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


Пример работы скрипта автоматической смены изображений Вы можете наблюдать чуть ниже.


Пример работы скрипта автоматической смены изображений
Подпись изображения №1
Предыдущая Старт/Стоп Следующая

Для того, чтобы получить на своем сайте такую автоматическую смену изображений (слайдшоу), вставьте в начало Вашей странички следующий JavaScript код:

JavaScript код:
<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_text = new Array ("Подпись изображения №1","Подпись изображения №2",
"Подпись изображения №3","Подпись изображения №4");
var 
ImgNum 0;
var 
ImgLength all_images.length 1;
var 
delay 2500;
var 
lock false;
var 
run;

function 
chgImg(direction) {
 if (
document.images) {
  
ImgNum ImgNum direction;
  if (
ImgNum ImgLength) { ImgNum 0; }
  if (
ImgNum 0) { ImgNum ImgLength; }
  
document.slide_show.src all_images[ImgNum];
  if (
document.layers) {
   
document.layers.slide_show_text.document.write(all_text[ImgNum]);
   
document.layers.slide_show_text.document.close();
  }
  else 
slide_show_text.innerHTML all_text[ImgNum];
 }
}

function 
auto() {
 if (
lock == true) {
  
lock false;
  
window.clearInterval(run);
 }
 else if (
lock == false) {
  
lock true;
  
run setInterval("chgImg(1)"delay);
 }
}
</script>

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

HTML код:
<div align="center">
 <
table border="0">
  <
tr align="center">
   <
td colspan="3"><img src="image/img_1.png" name="slide_show"></td>
  </
tr>
  <
tr align="center">
   <
td colspan="3"><span id="slide_show_text">Подпись изображения №1</span></td>
  </
tr>
  <
tr>
   <
td align="right"><a href="javascript:chgImg(-1)">Предыдущая</a></td>
   <
td align="center"><a href="javascript:auto()">Старт/Стоп</a></td>
   <
td align="left"><a href="javascript:chgImg(1)">Следующая</a></td>
  </
tr>
 </
table>
</
div>

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

JavaScript код:
<script type="text/javascript">
 
auto();
</script>

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

Вентилятор среднего давления. Промышленные вентиляторы в москве. Вентиляторы дымоудаления.

Дата создания: 18:18:51 27.07.2012 г.
Дата обновления: 00:02:10 28.07.2012 г.
Посещений темы: 8119 раз(а).

Комментарии посетителей (всего 22 шт.):
Ольга
0
# 361
(18:10:39  29.10.2012 г.)

Добрый день, помогите, пожалуйста, к каждой подписи добавить свою ссылку. Спасибо.
Ответить

Administrator
0
# 362
(18:36:56  29.10.2012 г.)

Здравствуйте Ольга.
Добавить ссылку довольно просто, для этого в массив all_text добавляйте строчки такого вида:
"<a href='index.php'>Главная</a> изображение №1",
"<a href='news.php'>Новости</a> изображение №2",
Ответить

Ольга
0
# 363
(22:18:40  29.10.2012 г.)

Спасибо огромное. Вопрос по "переключателям" (предыдущая, стоп, следующая). Как сделать четыре прямых "переключателя" на каждую из картинок. То есть, чтобы было 4 переключателя ("Картинка 1", "Картинка 2", "...3", "...4") и можно было бы менять картинки по желанию.
Ответить

Administrator
0
# 364
(22:37:31  29.10.2012 г.)

Для этого заменяем три строчки:
function chgImg(direction) {
 if (document.images) {
  ImgNum = ImgNum + direction;
На четыре таких:
function chgImg(direction, set_img) {
 if (document.images) {
  if (set_img==true) ImgNum = direction-1;
   else ImgNum = ImgNum + direction;
Ссылка на нужную картинку будет такая: <a href="javascript:chgImg(3,true)">Хочу картинку №3</a>
Ответить

Ольга
0
# 366
(18:17:04  31.10.2012 г.)

Добрый день, подскажите, как сделать, чтобы цвет переключателей (на каждую картинку отдельно) менялся. Есть четыре картинки и четыре переключателя, каждый соответствует своей картинке. Если автоматически сменяется картинка, например на 2-ю, или мы нажимаем на картинку №2 сами, то переключатель, который соответствует этой картинке, меняет свой цвет и становится неактивным.
Ответить

Administrator
0
# 367
(19:35:44  31.10.2012 г.)

Перед последней закрывающей скобкой функции chgImg добавьте код:
mess='';
for (i=1; i<=ImgLength+1; ++i) {
 if (i!=ImgNum+1) {
 mess+=' <a style="color:red;" href="javascript:chgImg('+i+',true)">Хочу картинку №'+i+'</a> ';
 }
 else mess+='<span style="color:gray;">Хочу картинку №'+i+'</span>';

 if (document.layers) {
  document.layers.switch_text.document.write(mess);
  document.layers.switch_text.document.close();
 }
 else switch_text.innerHTML = mess;
}
В том месте, где нужно разместить переключатели, вставьте: <span id="switch_text"></span>
Ответить

Ольга
-1
# 369
(13:04:46  01.11.2012 г.)

Добрый день, работает не корректно. Привожу весь скрипт...
Подскажите, пожалуйста, где ошибка?
Ответить

Administrator
0
# 370
(13:28:58  01.11.2012 г.)

Ольга, из-за больших кодов в комментариях Ваш вопрос и наш ответ на него перенес на наш форум - http://usefulscript.ru/forum/showthread.php?tid=178
Ответить

Ольга
0
# 382
(19:02:28  06.11.2012 г.)

Добрый день, благодарю, все работает прекрасно. Хотелось бы еще смену сделать плавнее. Подскажите, как это сделать в том же скрипте, пожалуйста.
Ответить

Administrator
0
# 383
(22:49:02  07.11.2012 г.)

Ольга, сделал в отдельной теме, т.к. скрипт сильно изменил при помощи jQuery - Плавная смена изображений на jQuery.
Ответить

Валерий Мишаков
-1
# 626
(21:03:03  18.02.2013 г.)

Хороший скрипт. Только одна неприятность, при каждой перезагрузке картинки передергивает страницу на самый верх, если полоса прокрутки вниз опущена. С этим ничего поделать нельзя?
Ответить

Administrator
0
# 628
(22:04:36  18.02.2013 г.)

В Опере и IE ничего подобного не замечено. Каким браузером пользуетесь?
Ответить

Александр99
0
# 633
(22:22:11  20.02.2013 г.)

Добрый день, на базе подобного скрипта сделал фотогалерею, но фотографии, которые "горизонтальные" работают хорошо, либо только "вертикальные", а если в перемешку, то растягивает (подгоняет под заданный размер) подскажите пожалуйста как сделать, чтобы автоматически менялось и шли фотки все подряд. Или надо обязательно показать мой скрипт? Спасибо.
Ответить

Administrator
0
# 635
(23:27:41  20.02.2013 г.)

У Вас скорее всего где-то задан размер для изображений (возможно в CSS), к которому и подгоняются все изображения. Так что самым простым решением будет убрать явно заданный размер изображений. А скрипт не мешало бы глянуть.
Ответить

Наталия
0
# 868
(22:06:26  20.05.2013 г.)

Спасибо за код! Очень помогли. Javascript только начинаю изучать, а на сайте нужно слайд-шоу. Находила подобные скрипты, но они почему-то не работали, а с Вашим все отлично!
Ответить

Мария
0
# 1548
(13:12:29  28.03.2014 г.)

Подскажите, пожалуйста, можно ли сделать так, чтобы по нажатию на кнопки (предыдущая или следующая) менялась не одна картинка, а группа картинок (например, по 6 штук)?
И кнопки сделать не снизу, а справа и слева от этой группы?
И количество групп тоже чтобы можно было изменить (не обязательно четыре, как в исходнике, а 2 или 8, к примеру)?
Ответить

Administrator
0
# 1549
(22:12:36  28.03.2014 г.)

Наверно, скрипт из данной темы на форуме должен Вам подойти.
Ответить

Алексей
0
# 1755
(16:09:50  16.07.2014 г.)

Подскажите, пожалуйста, как можно добавить к каждому изображению ссылку?
Ответить

Administrator
0
# 1756
(20:40:34  16.07.2014 г.)

Если Вам надо добавить ссылку к изображению в виде подписи, то для этого в массив all_text добавляйте строчки такого вида:
"<a href='index.php'>Главная</a> изображение №1",
"<a href='news.php'>Новости</a> изображение №2",
Об этом я уже упоминал в комментарии # 362.
Если Вам необходимо, чтобы само изображение было ссылкой, то Вам скорее подойдет скрипт, приведенный в теме нашего форума - Автоматическая смена изображений и ссылок.
Ответить

Анатолий
0
# 1959
(06:11:00  14.10.2014 г.)

Как разместить два таких слайдера на странице? При добавлении 2-х оба не работают. При удалении кода запуска работает только один.
Ответить

Administrator
0
# 1963
(22:13:14  14.10.2014 г.)

Попробуйте код из данной темы нашего форума - Несколько слайдшоу с плавной сменой изображений.
Ответить

Марина
1
# 2611
(16:08:58  10.08.2015 г.)

Возник вопрос: а можно сделать так, чтобы картинки менялись по горизонтали?
Ответить

Закрыть
Ваше имя:
269 + 4 =
Добавить комментарий к теме:
Ваше имя:
269 + 4 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Мешает ли Вам реклама на нашем сайте?


Mail.ru LiveInternet