Слайдер для ЭОР

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

Слайд-шоу - это набор картинок с эффектными переходами между снимками.

При этом фотографии (картинки) должны быть одного размера. В моем случае все картинки обработаны в программе Adobe Photoshop.

Время перехода между картинками, используя скрипт, можно установить самим, что дает возможность учащимся ознакомиться с предложенными видами техники в медленном режиме.

Размер просмотровой зоны задаем по ширине и высоте следующим кодом с использованием языка html + css и размещается внутри тега div

div align="center" class="sladt"СКРЕПЕРЫ

img/Фотогалерея/Скреперы/sk01.gif "width="650" height="450"

Назад" id="btnPrev" onclick="ShowPreviousImage()"

Старт слайдшоу" id="startSlideshow" onclick="StartSlideShow()"

Вперед" id="btnNext" onclick="ShowNextImage()"

div

div

Положение зоны просмотра задается относительно краев браузера с помощью стилевого файла

img { border: 1px solid #000 }

.pic { position: absolute; top: 2px; left: 155px;}

style

Слайд-шоу «Скреперы» представлено следующим скриптом. Количество картинок в нем прописано в строке, выделенной желтым цветом.

var pic = new Image();

var timer;

var first_pic = 100;

var second_pic = 0;

var sec = 0;

var currentPictureId = 0;

var pictures = new Array("sk01.gif", "sk011.gif", "sk10.gif", "sk1.gif", "sk2.gif", "sk3.gif", "sk7.gif", "sk13.gif");

var total_pictures = pictures.length;

var slideshow_started = false;

var disabled_opacity = false;

var step_opacity = 1;

var step_time = 1;

var sleep_time = 3000;

function changePicture(pictureId) {

if (currentPictureId == pictureId || first_pic != 100) {

return false;

}

currentPictureId = pictureId;

pic = new Image();

pic.src = "img/Фотогалерея/Скреперы/" + pictures[pictureId];

timer = setTimeout("checkLoading()", 3000);

document.getElementById("btnPrev").disabled = true;

document.getElementById("btnNext").disabled = true;

}

function checkLoading() {

if (pic.complete == true) {

if (disabled_opacity == true) {

document.getElementById("before").src = pic.src;

dcument.getElementById("btnPrev").disabled = false;

document.getElementById("btnNext").disabled = false;

sleep(sleep_time);

if (slideshow_started == true) {

ShowNextImage();

}

} else {

changeSlide();

document.getElementById("loading_text").innerHTML = " ";

document.getElementById("after").src = pic.src;

timer = setTimeout("changeSlide()", step_time);

}

} else {

timer = setTimeout("checkLoading()", 500);

document.getElementById("loading_text").innerHTML = "Loading, please wait...";

}

}

function sleep(delay) {

var start = new Date().getTime();

while (new Date().getTime()

}

function changeSlide() {

first_pic = first_pic - step_opacity;

second_pic = second_pic + step_opacity;

document.getElementById("before_div").style.opacity = first_pic / 100;

document.getElementById("after_div").style.opacity = second_pic / 100;

document.getElementById("after_div").style.filter = "alpha(opacity=" + second_pic + ")";

document.getElementById("before_div").style.filter = "alpha(opacity=" + first_pic +")";

if (second_pic 98) {

clearTimeout(timer);

document.getElementById("before").src = pic.src;

document.getElementById("before_div").style.opacity = 100;

document.getElementById("before_div").style.filter = "alpha(opacity=0)";

document.getElementById("after_div").style.opacity = 0;

document.getElementById("after_div").style.filter = "alpha(opacity=100)";

first_pic = 100;

second_pic = 0;

document.getElementById("btnPrev").disabled = false;

document.getElementById("btnNext").disabled = false;

if (slideshow_started == true) {

ShowNextImage();

}

} else {

timer = setTimeout("changeSlide()", step_time);

}

}

function ShowPreviousImage() {

var pictureId = (currentPictureId == 0) ? total_pictures - 1 : currentPictureId - 1;

changePicture(pictureId);

}

function ShowNextImage() {

var pictureId = (currentPictureId + 1 == total_pictures) ? 0 : currentPictureId + 1;

changePicture(pictureId);

}

function StartSlideShow() {

if (slideshow_started == false) {

slideshow_started = true;

document.getElementById("startSlideshow").value = "Остановить слайдшоу";

ShowNextImage();

} else {

slideshow_started = false;

document.getElementById("startSlideshow").value = "Старт слайдшоу";

}

}

script

В электронном образовательном ресурсе «Мелиоративные машины» использовано несколько слайд-шоу:

• Скреперы

• Рыхлители

• Планировщики

• Бульдозеры

• Грейдеры