Установка скрипта - Поочерёдный показ слайдов со ссылками на определённый адрес

В уроке по установке скрипта "Поочерёдный показ слайдов" был приведён код скрипта.

Сам скрипт можно скачать отсюда.

В этом уроке я покажу куда и какие дополнительные строки кода нужно прописать (выделено красным цветом), чтобы каждая картинка представляла собой ссылку на определённый адрес страницы сайта.

Код между тегами head:

<SCRIPT LANGUAGE="JavaScript">
NewImg = new Array ("1.jpg", "2.jpg", "3.jpg", "4.jpg","5.jpg");
Newlinks=new Array("http://www.yandex.ru", "http://www.rambler.ru/", "http://www.meta.ua/", "http://www.microsoft.com", "http://www.google.ru/");
var imageholder=new Array()
for (i=0;i<NewImg.length;i++)
{
imageholder[i]=new Image()
imageholder[i].src=NewImg[i]
}
function gotoshow(){
window.location=Newlinks[linkNum]
}
var linkNum=0;

var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 3000;
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.slideshow.src = imageholder[ImgNum].src;
linkNum=ImgNum
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
</script>

Код между тегами body:

<table width="215">
<tr>
<td align="center" height="155">
<a href="javascript:gotoshow()">
<img src="1.jpg" name="slideshow">
</a>
</td>
</tr>
<tr>
<td><table align="center">
<tr>
<td align="center"> <a href="javascript:chgImg(-1)">Назад</a>
</td>
<td align="center"> <a href="javascript:auto()">Авто/Стоп</a>
</td>
<td align="center"> <a href="javascript:chgImg(1)">Вперёд</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

В строке document.slideshow.src = NewImg[ImgNum]; правую часть от оператора присваивания (знак равенства) надо заменить на imageholder[ImgNum].src; (выделено зелёным цветом).

В переменной Newlinks находится массив с адресами к определённым страницам сайта для каждой картинки. Замените их своими адресами и скрипт будет готов к работе.


Опубликовано: 8.10.2010 00:28

Просмотров всего: 566



Добавить комментарий:

Для обновления картинки кликните по ней.

Комментарии:

Нет комментариев.