Скачать шаблоны сайтов:
Простое слайд-шоу на JavaScript, случайный выбор изображений
JavaScript, по нашему мнению, чудесно подходит для создания небольших элементов для сайта, которые придают ему живости и улучшают впечатления пользователей о сайте.
Рассмотрим пример создания небольшого скрипта, который случайно выбирает изображения и отображает их в режиме слайд-шоу. Готовый скрипт на страничке будет работать так, как видно слева. Напомним, что в предыдущих статьях мы описывали пример создания скрипта на JavaScript, последовательно отображающего выбранные изображения в режиме слайд-шоу.
В примере мы будем использовать четыре изображения, хранящиеся в файлах img0.jpeg, img1.jpeg, img2.jpeg, img3.jpeg. В html-коде страницы сайта в области <head> необходимо указать файл в формате .js который содержит JavaScript скрипт:
<script type="text/javascript" src="slideshow.js"><noclear></script>
В теге <body> необходимо указать функцию слайд-шоу из JavaScript скрипта:
<body onLoad="startSlideshow()">
Далее, добавим на страничку изображение, которое будет отображаться первым:
<img border="0" id="mainImg" src="img0.jpeg">
Теперь напишем код скрипта слайд-шоу (файла slideshow.js)
Сначала опишем переменные и загрузим изображения:
var imgId;
var myrandom;
ci=0;
var image0=new Image();
var image1=new Image();
var image2=new Image();
var image3=new Image();
image0.src="img0.jpeg";
image1.src="img1.jpeg";
image2.src="img2.jpeg";
image3.src="img3.jpeg";
Теперь создадим функцию, случайным образом отображающую изображения, исключая при этом повторное отображение одного и того же изображения:
function startSlideshow()
{
do
{
myrandom=Math.round(Math.random()*3)
}
while (myrandom==ci)
imgId=document.getElementById("mainImg");
imgId.src=eval("image"+myrandom+".src");
ci=myrandom;
setTimeout("startSlideshow()",3000);
}
Другие новости, статьи по теме PHP, JavaScript, web-программирование:
ORDER BY DESC с несколькими значениями NULL в MySQL
Специальные символы в html
Загрузка файлов на сервер, скрипт на php
PHP+MySQL вопросительные знаки
Динамическое создание диаграмм на php
Слайд-шоу на JavaScript
Новости, статьи:
ORDER BY DESC с несколькими значениями NULL в MySQL
Простое слайд-шоу на JavaScript, случайный выбор изображений
Загрузка файлов на сервер, скрипт на php
PHP+MySQL вопросительные знаки
Динамическое создание диаграмм на php
Прямое пополнение счета без комиссии (украинские мобильные операторы)
Все новости, статьи