Автоматическая смена изображений
и подписей к ним
Чтобы показать посетителям своего сайта последовательно несколько различных изображений мы предлагаем Вам воспользоваться JavaScript кодом автоматической смены изображений.
Основным отличием рассматриваемого нами скрипта от приведенного ранее в теме Автоматическая смена изображений (слайд-шоу) является наличие своей подписи для каждого изображения (картинки).
Пример работы скрипта автоматической смены изображений Вы можете наблюдать чуть ниже.
 |
||
| Подпись изображения № 1 | ||
| Предыдущая | Старт/Стоп | Следующая |
Для того чтобы получить на своем сайте такую автоматическую смену изображений (слайд-шоу), вставьте в начало Вашей странички следующий 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","Вторая подпись",
"Подпись третьего фото","Картинка № 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];
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>Далее в том месте Вашей странички, где Вы планируете разместить изображения с подписями, которые будут автоматически меняться, добавите следующий код:
<table style="margin: 0 auto;">
<tr style="text-align: center;">
<td colspan="3"><img src="image/img_1.png" name="slide_show"></td>
</tr>
<tr style="text-align: center;">
<td colspan="3"><span id="slide_show_text">Подпись изображения № 1</span></td>
</tr>
<tr>
<td style="text-align: right;"><a href="javascript:chgImg(-1)">Предыдущая</a></td>
<td style="text-align: center;"><a href="javascript:auto()">Старт/Стоп</a></td>
<td style="text-align: left;"><a href="javascript:chgImg(1)">Следующая</a></td>
</tr>
</table>После этого остается только запустить ранее описанную функцию автоматической смены изображений. Делается это так:
<script type="text/javascript">
auto();
</script>В результате добавления на свой сайт рассмотренного выше скрипта слайд-шоу, Вы получите точно такую же смену указанных Вами изображений (картинок) как и в примере, приведенном выше.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Добавить ссылку довольно просто, для этого в массив all_text добавляйте строчки такого вида:
"<a href='index.php'>Главная</a> изображение №1",
"<a href='news.php'>Новости</a> изображение №2",
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>
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>';
switch_text.innerHTML = mess;
}
В том месте, где нужно разместить переключатели, вставьте: <span id="switch_text"></span>
Подскажите, пожалуйста, где ошибка?
И кнопки сделать не снизу, а справа и слева от этой группы?
И количество групп тоже чтобы можно было изменить (не обязательно четыре, как в исходнике, а 2 или 8, к примеру)?
"<a href='index.php'>Главная</a> изображение №1",
"<a href='news.php'>Новости</a> изображение №2",
Об этом я уже упоминал в комментарии # 362.
Если Вам необходимо, чтобы само изображение было ссылкой, то Вам скорее подойдет скрипт, приведенный в теме нашего форума - Автоматическая смена изображений и ссылок.
Я бы хотел привязать input, для отправки данных именно к картинке (или к слайду), т.е. пользователь выбирает нужный ему слайд, в поле с "галочками" и "полями ввода" вводит нужную информацию, нажимает кнопку отправки данных...
Полная версия комментария и ответ на него были перенесены на наш форум.