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

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

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

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

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

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

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

<div class="slad">

               <div id="after_div" class="pic"> <img id="after" src="" width="650" height="450"> </div>

               <div id="before_div" class="pic"><img id="before" src= "img/Фотогалерея/Скреперы/sk01.gif "width="650" height="450"></center></div>

               <div id="loading_text" align="center">&nbsp;</div>

               <div class="knop">

               <input type="button" value="Назад" id="btnPrev" onclick="ShowPreviousImage()">

               <input type="button" value="Старт слайдшоу" id="startSlideshow" onclick="StartSlideShow()">

               <input type="button" value="Вперед" id="btnNext" onclick="ShowNextImage()">

               </div>

</div> 

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

<style>

  img { border: 1px solid #000 }

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

</style>

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

<script>

 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 = "&nbsp;";

            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() < start + delay);

 }

 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>

                                     

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

·         Скреперы

·         Рыхлители

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

·         Бульдозеры

·         Грейдеры 

Автор: Власовец Надежда Витальевна.