Сценарии из библиотек сторонних разработчиков

Реализация сложного сценария. Сценарий «Слайд-шоу». Самостоятельная реализация сложных сценариев - достаточно трудное и кропотливое мероприятие, если только вы не изучали программирование как основную специальность. В тоже время просторы Сети позволяют выбрать практически любой необходимый сценарий на страницах как любительских, так и специализированных сайтов.

Вышеизложенной информации вполне достаточно, чтобы прочитать и понять небольшой сценарий и при этом определить, как его можно адаптировать под вашу страницу. Кроме того, данной информации хватит для прочтения большого сценария и его расшифровки и модификации в своих целях. Попробуем разобраться с одним популярным сценарием, который в свободном доступе можно найти в Интернете. Сценарий организует просмотр изображений в форме слайд-шоу, то есть позволяет перелистывать изображения, появляющиеся на странице.

Рассмотрим данный сценарий согласно полученным ранее знаниям. Поскольку он достаточно сложен - в нем подразумевается работа со слоями, то для детального понимания и модификации сценария вам понадобится учебник или спецификация языка JavaScript. Рассмотрим код в общих чертах, чтобы понять, как организовать свои изображения для использования в этом сценарии.

<htmlxheadxscript> - начало страницы и сценария.
var imagelndex= 0;- объявление переменной, в которой будет храниться номер фотографии, отображаемой на данный момент на экране.
function goToFirst(){imagelndex=0; slaydshow()}- переход к первой фотографии.
function goToPrevious{){if (imagelndex>0) imageIndex--; slaydshow ()} - переход к предыдущей фотографии.
function goToNext(){if (imagelndex < images.length) imagelndex++; slaydshow () } - переход к последующей фотографии.
function goToLast(){imagelndex=images.length - 1; slaydshow {) ) - переход к последней фотографии.
Далее идет функция, выводящая на экран текущее изображение и скрывающая неиспользуемые на данный момент ссылки.
function slaydshowО {
imageHolderObject.src=images[imagelndex);
firstObject.style.visibility=(imagelndex==0) ? "hidden":"visible"; previousObject.style.visibility=firstObject.style.visibility;
nextObject.style.visibility={imagelndex==images.length - 1} ? "hidden":"visible";
lastObject.style.visibility=nextObject.style.visibility;)
</scriptx/head> - окончание сценария.
<body> - начало тела страницы.
<img id=" imageHolder" src="/"><p> - создание пустого изображения.

Далее идет блок гиперссылок, осуществляющих переключение между изображениями, где последовательности символов, начинающиеся с &, соответствуют открывающимся и закрывающимся угловым скобкам, которые обозначают стрелки перехода между фотографиями.


<а id="first" href="#" onClick="goToFirst{);"> bit;&lt;</a>&nbsp; <a id="previous" href="#" onClick="goToPrevious();"> &lt; </a>&r.bsp; <a id="next" href="#" onClick="goToNext();"> &gt;</a>&nbsp; <a id="last" href="#" onClick="goToLast();"> &gt;&gt;</ax/p> <script>

var images=new Array () - объявление массива, содерл<ащего фотографии.
images [0] = "р i с 1 . jpg" ; images [1] - " p i с 2 . jpg";images[2]= " p i с 3.jpg";images[3]= " p i с 4. jpg";images[4]="pic5.jpg";images[5]="pic6.jpg"; - присвоение элементам массива соответствующих имен фотографий. Соответственно, количество элементов массива зависит от количества фотографий. Только не забывайте присваивать значения элементам массива.
Блок объявления набора экземпляров объектов, которые соответствуют гиперссылкам и так называемому пустому изображению.
var imageHolderObject=document.all["imageHolder"];
var firstObject=document.all["first"];
var previousObject=document.all["previous"];
var nextObject=document.all["next"];
var lastObject=document.all["last"];
goToFirst (); - вызов первой фотографии; функция активизируется при загрузке страницы.
</scriptx/bodyx/html> - окончание сценария и страницы.

Результат выполнения сценария - слайд-шоу. При загрузке страницы будет выведена первая фотография, описанная в массиве, а под ней - стрелки перехода между снимками.

После того как Вы сделайте все операции, которые мы написали выше, то Вы увидите, что оживить сайт не так трудно, как казалось первоначально. Сценарии, написанные не только на JavaScript, но и на других языках программирования, превосходно справляются с большинством поставленных задач. Они могут с успехом использоваться на веб-страницах при размещении сайта на бесплатных веб-серверах, имеющих некоторые ограничения, например на сервисе narod.ru.

Если же язык программирования и написанные на нем сценарии не могут удовлетворить ваши требования, то, скорее всего, необходимо задуматься о платном хостинге и переходе на более сложную систему управления сайтом. Как вариант можно рассмотреть систему управления содержимым Joomla.

Тэги: сети, время, сайтов, реализация, сценарий, выбрать, просторы

← Обзор библиотеки jQuery		JavaScript сценарий "Текущая дата" →